Селектор CSS для получения последнего видимого div

Трудный вопрос о селекторе CSS, не знаю, возможно ли это.

Предположим, что это HTML-макет:

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

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

Ответ 1

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

Например, если на сайте реализовано jQuery, вы можете просто сделать:

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

Хотя, надеюсь, у вас будет класс /ID, обернутый вокруг выбранных вами div, и в этом случае ваш код будет выглядеть следующим образом:

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

Ответ 2

Существует чисто css-решение (CSS3), если ваш div скрыт с помощью атрибута style

div:not([style*="display: none"]):last-child{ /* bla */}

Обратите внимание на пробел между "display:" и "none", если вы не можете точно сказать, есть ли место в атрибуте или нет, вы можете сделать селектор следующим образом:

div:not([style*="display:none"]):not([style*="display: none"]):last-child{ /* bla */}

jQuery является королем, но решения CSS3 являются богом

Ответ 3

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

Ответ 4

Я думаю, что невозможно выбрать значение css (display)

изменить:

на мой взгляд, было бы целесообразно использовать немного jquery здесь:

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

Ответ 5

Решение Pure 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/

Ответ 6

Если вы можете использовать встроенные стили, вы можете сделать это исключительно с помощью CSS.

Я использую это для выполнения CSS для следующего элемента, когда отображается предыдущий:

div[style='display: block;'] + table {
  filter: blur(3px);
}

Ответ 7

по-другому, вы можете сделать это с помощью javascript, в JQuery вы можете использовать что-то вроде:

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

* переиздал

Ответ 8

Это невозможно с помощью 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;
    }

});

Ответ 9

Это сработало для меня.

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