Selektor CSS do pobrania ostatniego widocznego elementu div

Podchwytliwe pytanie dotyczące selektora CSS, nie wiem, czy to w ogóle możliwe.

Powiedzmy, że to jest układ HTML:

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

Chcę wybrać ostatnią div, która jest wyświetlana (tj. Nie display:none), która byłaby trzecią divw podanym przykładzie. Pamiętaj, liczba divs na prawdziwej stronie może się różnić (nawet display:nonejedna).

Możesz wybrać i stylizować to za pomocą JavaScript lub jQuery, ale sam CSS nie może tego zrobić.

Na przykład, jeśli masz zaimplementowane jQuery w witrynie, możesz po prostu zrobić:

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

Chociaż miejmy nadzieję, że będziesz mieć klasę / identyfikator zawinięty wokół wybranych elementów div, w takim przypadku Twój kod wyglądałby tak:

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

Prawdziwa odpowiedź na to pytanie brzmi: nie możesz tego zrobić. Alternatywy dla odpowiedzi zawierających tylko CSS nie są poprawnymi odpowiedziami na to pytanie, ale jeśli rozwiązania JS są dla Ciebie akceptowalne, powinieneś wybrać jedną z odpowiedzi JS lub jQuery tutaj. Jednak, jak powiedziałem powyżej, prawdziwa, poprawna odpowiedź jest taka , że nie możesz tego zrobić w CSS niezawodnie, chyba że chcesz zaakceptować :notoperator z [style*=display:none]innymi takimi zanegowanymi selektorami, które działają tylko w stylach wbudowanych i ogólnie są kiepskie rozwiązanie.

Jeśli możesz używać stylów wbudowanych, możesz to zrobić wyłącznie za pomocą CSS.

Używam tego do wykonywania CSS na następnym elemencie, gdy poprzedni jest widoczny:

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

Myślę, że nie można wybrać według wartości css (wyświetlacz)

edytować:

moim zdaniem sensowne byłoby użycie tu trochę jquery:

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

Czyste rozwiązanie JS (np. Gdy nie używasz jQuery lub innego frameworka do innych rzeczy i nie chcesz tego ściągać tylko do tego zadania):

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

Próbować

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

w inny sposób możesz to zrobić za pomocą javascript, w Jquery możesz użyć czegoś takiego jak:

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

* ponownie zredagowane

Nie jest to możliwe w przypadku CSS, jednak można to zrobić za pomocą 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 (poprzednie rozwiązanie):

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

$items.each(function() {

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

});

Jeśli nie potrzebujesz już ukrytych elementów, po prostu użyj element.remove()zamiast element.style.display = 'none';.

To zadziałało dla mnie.

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