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

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

Disons que c'est 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 non display:none) qui serait le troisième divdans l'exemple donné. Remarquez que le nombre de divs sur la page réelle peut différer (même display:noneceux).

Vous pouvez sélectionner et styliser cela avec JavaScript ou jQuery, mais CSS seul ne peut pas le faire.

Par exemple, si vous avez implémenté jQuery sur le site, vous pouvez simplement faire:

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

Bien que j'espère que vous aurez une classe / un ID enroulé autour des divs que vous sélectionnez, auquel cas votre code ressemblerait à:

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

La vraie réponse à cette question est que vous ne pouvez pas le faire. Les alternatives aux réponses CSS uniquement ne sont pas des réponses correctes à cette question, mais si les solutions JS vous conviennent, vous devez choisir l'une des réponses JS ou jQuery ici. Cependant, comme je l'ai dit ci-dessus, la vraie et bonne réponse est que vous ne pouvez pas le faire de manière fiable en CSS à moins que vous ne soyez prêt à accepter l' :notopérateur avec [style*=display:none]et d'autres sélecteurs inversés, qui ne fonctionnent que sur les styles en ligne, et sont globalement médiocres. Solution.

Si vous pouvez utiliser des styles en ligne, vous pouvez le faire uniquement avec CSS.

J'utilise ceci pour faire du CSS sur l'élément suivant lorsque le précédent est visible:

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

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

Éditer:

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

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

Solution Pure JS (par exemple, lorsque vous n'utilisez pas jQuery ou un autre framework pour d'autres choses et que vous ne voulez pas le télécharger uniquement pour cette tâche):

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

Essayer

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

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

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

* réédité

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

DÉMO 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;
    }

});

Si vous n'avez plus besoin des éléments masqués, utilisez simplement à la element.remove()place de element.style.display = 'none';.

Cela a fonctionné pour moi.

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