Ein CSS-Selektor, um das letzte sichtbare Div zu erhalten

Eine knifflige CSS-Auswahlfrage, ich weiß nicht, ob es überhaupt möglich ist.

Nehmen wir an, dies ist das HTML-Layout:

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

Ich möchte den letzten auswählen div, der angezeigt wird (dh nicht display:none), der divim gegebenen Beispiel der dritte wäre . Wohlgemerkt, die Anzahl der divs auf der realen Seite kann unterschiedlich sein (sogar die display:none).

Sie können dies mit JavaScript oder jQuery auswählen und formatieren, aber CSS allein kann dies nicht.

Wenn Sie beispielsweise jQuery auf der Site implementiert haben , können Sie Folgendes tun:

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

Obwohl Sie hoffentlich eine Klasse / ID um die von Ihnen ausgewählten Divs haben, würde Ihr Code in diesem Fall folgendermaßen aussehen:

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

Die eigentliche Antwort auf diese Frage lautet: Sie können es nicht tun. Alternativen zu Nur-CSS-Antworten sind keine korrekten Antworten auf diese Frage. Wenn JS-Lösungen für Sie akzeptabel sind, sollten Sie hier eine der JS- oder jQuery-Antworten auswählen. Wie ich oben sagte, ist die wahre, richtige Antwort jedoch, dass Sie dies in CSS nicht zuverlässig tun können, es sei denn, Sie sind bereit, den :notOperator mit den [style*=display:none]und anderen solchen negierten Selektoren zu akzeptieren , was nur bei Inline-Stilen funktioniert und insgesamt schlecht ist Lösung.

Wenn Sie Inline-Stile verwenden können, können Sie dies nur mit CSS tun.

Ich verwende dies, um CSS für das nächste Element auszuführen, wenn das vorherige sichtbar ist:

div [style = 'display: block;'] + table {
  Filter: Unschärfe (3px);
}}

Ich denke, es ist nicht möglich, durch einen CSS-Wert auszuwählen (Anzeige)

bearbeiten:

Meiner Meinung nach wäre es sinnvoll, hier ein bisschen jquery zu verwenden:

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

Reine JS-Lösung (z. B. wenn Sie jQuery oder ein anderes Framework nicht für andere Zwecke verwenden und diese nicht nur für diese Aufgabe herunterladen möchten):

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

Versuchen

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

Auf andere Weise können Sie dies mit Javascript tun. In Jquery können Sie Folgendes verwenden:

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

* überarbeitet

Mit CSS ist dies nicht möglich, Sie können dies jedoch mit jQuery tun.

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 (vorherige Lösung):

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

$items.each(function() {

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

});

Wenn Sie die ausgeblendeten Elemente nicht mehr benötigen, verwenden Sie einfach element.remove()anstelle von element.style.display = 'none';.

Das hat bei mir funktioniert.

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