Un selettore CSS per ottenere l'ultimo div visibile

Una domanda complicata per i selettori CSS, non so se sia possibile.

Diciamo che questo è il layout HTML:

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

Voglio selezionare l'ultimo div, che viene visualizzato (cioè no display:none) che sarebbe il terzo divnell'esempio dato. Intendiamoci, il numero di divs sulla pagina reale può differire (anche display:nonequelli).

Puoi selezionarlo e modellarlo con JavaScript o jQuery, ma i CSS da soli non possono farlo.

Ad esempio, se hai implementato jQuery sul sito, potresti semplicemente fare:

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

Anche se si spera che tu abbia una classe / ID racchiusa tra i div che stai selezionando, nel qual caso il tuo codice sarebbe simile a:

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

La vera risposta a questa domanda è che non puoi farlo. Le alternative alle risposte solo CSS non sono risposte corrette a questa domanda, ma se le soluzioni JS sono accettabili per te, allora dovresti scegliere una delle risposte JS o jQuery qui. Tuttavia, come ho detto sopra, la risposta vera e corretta è che non puoi farlo in modo affidabile nei CSS a meno che tu non sia disposto ad accettare l' :notoperatore con [style*=display:none]e altri selettori così negati, che funzionano solo su stili in linea ed è complessivamente scarso soluzione.

Se è possibile utilizzare gli stili incorporati, è possibile farlo esclusivamente con CSS.

Sto usando questo per fare CSS sull'elemento successivo quando è visibile quello precedente:

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

Penso che non sia possibile selezionare un valore css (display)

modificare:

a mio avviso, avrebbe senso usare un po 'di jquery qui:

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

Soluzione JS pura (ad es. Quando non si utilizza jQuery o un altro framework per altre cose e non si desidera scaricarla solo per questa attività):

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

Provare

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

in altro modo, puoi farlo con javascript, in Jquery puoi usare qualcosa come:

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

* rimontate

Non è possibile con CSS, tuttavia è possibile farlo con 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 (soluzione precedente):

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

$items.each(function() {

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

});

Se non hai più bisogno degli elementi nascosti, usa element.remove()invece di element.style.display = 'none';.

Questo ha funzionato per me.

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