Um seletor de CSS para obter a última div visível

Uma pergunta complicada de seletor de CSS, não sei se é possível.

Digamos que este é o layout HTML:

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

Quero selecionar o último div, que é exibido (ou seja, não display:none), que seria o terceiro divno exemplo dado. Lembre-se, o número de divs na página real pode ser diferente (mesmo display:noneos).

Você pode selecionar e estilizar isso com JavaScript ou jQuery, mas o CSS sozinho não pode fazer isso.

Por exemplo, se você tiver o jQuery implementado no site, poderá fazer:

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

Embora, esperançosamente, você tenha uma classe / ID agrupada em torno dos divs que você está selecionando; nesse caso, seu código seria semelhante a:

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

A resposta real para esta pergunta é: você não pode fazê-lo. Alternativas às respostas somente de CSS não são respostas corretas para esta pergunta, mas se as soluções JS forem aceitáveis ​​para você, você deve escolher uma das respostas JS ou jQuery aqui. No entanto, como eu disse acima, a resposta correta e verdadeira é que você não pode fazer isso no CSS de maneira confiável, a menos que esteja disposto a aceitar o :notoperador com os [style*=display:none]seletores negados e com outros seletores, que funcionam apenas em estilos inline e são geralmente pobres solução.

Se você pode usar estilos embutidos, pode fazê-lo exclusivamente com CSS.

Estou usando isso para fazer CSS no próximo elemento quando o anterior estiver visível:

div [style = 'display: bloco;'] + tabela {
  filtro: desfoque (3px);
}

Eu acho que não é possível selecionar por um valor css (display)

editar:

na minha opinião, faria sentido usar um pouco de jquery aqui:

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

Solução JS pura (por exemplo, quando você não usa o jQuery ou outra estrutura para outras coisas e não deseja fazer o download apenas para esta tarefa):

<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/

Experimentar

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

de outra maneira, você pode fazê-lo com javascript, no Jquery, você pode usar algo como:

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

* reeditado

Não é possível com CSS, no entanto, você pode fazer isso com 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 (solução anterior):

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

$items.each(function() {

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

});

Se você não precisar mais dos elementos ocultos, use em element.remove()vez de element.style.display = 'none';.

Isso funcionou para mim.

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