Selektor CSS untuk mendapatkan div terakhir yang terlihat

Pertanyaan pemilih CSS yang rumit, tidak tahu apakah itu mungkin.

Katakanlah ini adalah tata letak HTML:

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

Saya ingin memilih yang terakhir div, yang ditampilkan (mis. Tidak display:none) yang akan menjadi yang ketiga divdalam contoh yang diberikan. Pikiran Anda, jumlah divs pada halaman nyata dapat berbeda (bahkan display:noneyang).

Anda dapat memilih dan menata ini dengan JavaScript atau jQuery, tetapi CSS saja tidak dapat melakukan ini.

Misalnya, jika Anda menerapkan jQuery di situs, Anda bisa melakukan:

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

Meskipun mudah-mudahan Anda akan memiliki kelas / ID melilit div yang Anda pilih, dalam hal ini kode Anda akan terlihat seperti:

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

Jawaban sebenarnya untuk pertanyaan ini adalah, Anda tidak bisa melakukannya. Alternatif untuk jawaban khusus CSS bukan jawaban yang benar untuk pertanyaan ini, tetapi jika solusi JS dapat Anda terima, maka Anda harus memilih salah satu dari jawaban JS atau jQuery di sini. Namun, seperti yang saya katakan di atas, jawaban yang benar dan benar adalah bahwa Anda tidak dapat melakukan ini dengan andal di CSS kecuali Anda bersedia menerima :notoperator dengan [style*=display:none]dan penyeleksi negatif lainnya, yang hanya bekerja pada gaya inline, dan secara keseluruhan buruk larutan.

Jika Anda dapat menggunakan gaya sebaris, maka Anda dapat melakukannya murni dengan CSS.

Saya menggunakan ini untuk melakukan CSS pada elemen berikutnya ketika yang sebelumnya terlihat:

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

Saya pikir itu tidak mungkin untuk memilih dengan nilai css (tampilan)

edit:

menurut pendapat saya, masuk akal untuk menggunakan sedikit jquery di sini:

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

Solusi JS murni (mis. Ketika Anda tidak menggunakan jQuery atau kerangka kerja lain untuk hal-hal lain dan tidak ingin mengunduh itu hanya untuk tugas ini):

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

Mencoba

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

dengan cara lain, Anda dapat melakukannya dengan javascript, di Jquery Anda dapat menggunakan sesuatu seperti:

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

* diedit ulang

Tidak mungkin dengan CSS, namun Anda bisa melakukan ini dengan jQuery.

DEMO JSFIDDLE

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 (solusi sebelumnya):

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

$items.each(function() {

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

});

Jika Anda tidak lagi membutuhkan elemen yang disembunyikan, cukup gunakan element.remove()saja element.style.display = 'none';.

Ini berhasil untuk saya.

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