Un sélecteur CSS pour obtenir la dernière div visible

Question

Une question délicate sur les sélecteurs CSS, je ne sais même pas si c'est possible.

Disons qu'il s'agit de la mise en page HTML :

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

Je veux sélectionner le dernier div qui est affiché (c'est-à-dire pas display:none ) qui serait le troisième div dans l'exemple donné. Attention, le nombre de div sur la page réelle peuvent différer (même les display:none ).

Answer 1

Vous pouvez sélectionner et styliser ces éléments avec JavaScript ou jQuery, mais les feuilles de style en cascade (CSS) ne suffisent pas.

Par exemple, si vous avez jQuery mis en œuvre sur le site, vous pourriez simplement le faire :

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

Avec un peu de chance, vous aurez une classe/ID enveloppée autour des divs que vous sélectionnez, auquel cas votre code ressemblerait à ceci :

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

Answer 2

Il existe une solution purement css (CSS3) si votre div est caché en utilisant l'attribut "style".

div:not([style*="display: none"]):last-child{ /* bla */}

Notez l'espace entre "display :" et "none", si vous ne pouvez pas dire exactement s'il y a un espace dans l'attribut ou non, vous pouvez faire le sélecteur comme ceci :

div:not([style*="display:none"]):not([style*="display: none"]):last-child{ /* bla */}

jQuery est roi, mais les solutions CSS3 sont des dieux

Answer 3

Je pense qu'il n'est pas possible de sélectionner par une valeur css (affichage).

éditer :

à mon avis, il serait judicieux d'utiliser un peu de jquery ici :

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

Answer 4

Ce n'est pas possible avec CSS, mais vous pourriez le faire avec jQuery.

DEMO DE 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 (solution précédente) :

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

$items.each(function() {

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

});

Answer 5

D'une autre manière, vous pouvez le faire avec javascript , en Jquery vous pouvez utiliser quelque chose comme :

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

*réédité