En son görünür div elde etmek için bir CSS seçici

Zor bir CSS seçici sorusu, hatta mümkün olup olmadığını bilmiyorum.

Bunun HTML mizanpajı olduğunu varsayalım:

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

Verilen örnekte üçüncü olan div(yani değil display:none) görüntülenen sonuncuyu seçmek istiyorum div. Dikkat edin, divgerçek sayfadaki s sayısı farklı olabilir (hattadisplay:none olanlar).

Bunu JavaScript veya jQuery ile seçebilir ve stil uygulayabilirsiniz, ancak tek başına CSS bunu yapamaz.

Örneğin , sitede jQuery uygulanmışsa, şunları yapabilirsiniz:

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

Umarım seçtiğiniz div'ların etrafına sarılmış bir sınıf / kimliğiniz olmasına rağmen, bu durumda kodunuz şöyle görünür:

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

Bu sorunun asıl cevabı, bunu yapamazsınız. Yalnızca CSS yanıtlarına alternatifler bu sorunun doğru yanıtları değildir, ancak JS çözümleri sizin için kabul edilebilirse, burada JS veya jQuery yanıtlarından birini seçmelisiniz. Bununla birlikte, yukarıda söylediğim gibi, doğru, doğru cevap, operatörü sadece satır içi stiller üzerinde çalışan ve genel olarak zayıf olan bu gibi olumsuzlanmış seçicilerle kabul etmeye istekli olmadığınız sürece bunu CSS'de güvenilir bir şekilde yapamayacağınızdır. çözüm.:not[style*=display:none]

Satır içi stilleri kullanabiliyorsanız, bunu tamamen CSS ile yapabilirsiniz.

Önceki görünür olduğunda bir sonraki öğede CSS yapmak için kullanıyorum:

div [style = 'display: block;'] + tablo {
  filtre: bulanıklaştırma (3 piksel);
}

Bence bir css değeri (ekran) ile seçmek mümkün değil

Düzenle:

bence, burada biraz jquery kullanmak mantıklı olurdu:

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

Pure JS çözümü (örneğin, başka şeylere jQuery veya başka bir çerçeve kullanmadığınızda ve bunu yalnızca bu görev için indirmek istemiyorsanız):

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

Deneyin

div: değil ([style * = "display: none"])

başka bir şekilde, javascript ile yapabilirsiniz, Jquery gibi bir şey kullanabilirsiniz:

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

* reedited

CSS ile mümkün değildir, ancak bunu jQuery ile yapabilirsiniz.

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 (önceki çözüm):

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

$items.each(function() {

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

});

Artık saklanan öğelere ihtiyacınız yoksa, element.remove()yerine kullanın element.style.display = 'none';.

Bu benim için çalıştı.

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