Селектор CSS, щоб отримати останній видимий роздільник

Складне запитання щодо вибору CSS, не знаю, чи це навіть можливо.

Скажімо, це HTML-макет:

<div></div>
<div></div>  
<div></div>  
<div style="display:none"></div>
<div style="display:none"></div>  

Я хочу вибрати останнє div, яке відображається (тобто не display:none), яке було б третім divу наведеному прикладі. Зауважте, кількість divs на реальній сторінці може відрізнятись (навіть ті, display:noneякі є).

Ви можете вибрати та стилювати це за допомогою JavaScript або jQuery, але лише CSS не може цього зробити.

Наприклад, якщо у вас на сайті реалізований jQuery , ви можете просто зробити:

var last_visible_element = $('div:visible:last');

Хоча, сподіваємось, у вас буде клас / ідентифікатор, обгорнутий навколо вибраних вами divs, і в такому випадку ваш код буде виглядати так:

var last_visible_element = $('#some-wrapper div:visible:last');

Справжня відповідь на це питання - ви не можете цього зробити. Альтернативи відповідей, що стосуються лише CSS, не є правильними відповідями на це питання, але якщо рішення JS прийнятні для вас, вам слід вибрати один із відповідей JS або jQuery тут. Однак, як я вже говорив вище, правдива правильна відповідь полягає в тому, що ви не можете зробити це в CSS надійно, якщо ви не готові прийняти :notоператора з [style*=display:none]іншими та такими запереченими селекторами, які працюють лише на стилі вбудованих даних, і це загальний бід рішення.

Якщо ви можете використовувати вбудовані стилі, то ви можете це робити виключно за допомогою CSS.

Я використовую це для того, щоб робити CSS на наступному елементі, коли видно попередній:

div [style = 'display: block;'] + таблиця {
  фільтр: розмиття (3 пікселя);
}

Я думаю, що неможливо вибрати значення css (відображення)

редагувати:

на мою думку, було б доцільно використати трохи jquery тут:

$('#your_container > div:visible:last').addClass('last-visible-div');

Чисте рішення JS (наприклад, коли ви не використовуєте jQuery або інший фреймворк для інших речей і не хочете завантажувати його лише для цього завдання):

<div>A</div>
<div>B</div>  
<div>C</div>  
<div style="display:none">D</div>
<div style="display:none">E</div>    

<script>
var divs = document.getElementsByTagName('div');
var last;

if (divs) {
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].style.display != 'none') {
            last = divs[i];           
        }
    }
}

if (last) {
    last.style.background = 'red';
}
</script>

http://jsfiddle.net/uEeaA/90/

Спробуйте

div: not ([style * = "display: none"])

по-іншому, ви можете це зробити з javascript, в Jquery ви можете використовувати щось на кшталт:

$('div:visible').last()

* reedited

З CSS це неможливо, проте ви можете це зробити за допомогою jQuery.

JSFIDDLE DEMO

jQuery:

$('li').not(':hidden').last().addClass("red");

HTML:

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

CSS:

.hideme {
    display:none;
}

.red {
    color: red;
}

jQuery (попереднє рішення):

var $items = $($("li").get().reverse());

$items.each(function() {

    if ($(this).css("display") != "none") {
        $(this).addClass("red");
        return false;
    }

});

Якщо вам більше не потрібні сховані елементи, просто використовуйте element.remove()замість них element.style.display = 'none';.

Це працювало для мене.

.alert:not(:first-child){
    margin: 30px;
}