web-dev-qa-db-fra.com

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

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

Disons que ceci 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 pas display:none) qui serait le troisième div de l'exemple donné. Notez que le nombre de divs sur la page réelle peut différer (même ceux display:none.).

htmlcsscss-selectors
152
Vishal Shah

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

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

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

J'espère que vous aurez une classe/ID entourant les divs que vous sélectionnez, auquel cas votre code ressemblerait à ceci:

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

La vraie réponse à cette question est, 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 sélectionner l'une des réponses JS ou jQuery ici. Cependant, comme je l’ai dit ci-dessus, la réponse vraie et correcte est que vous ne pouvez pas le faire de manière fiable en CSS sauf si vous êtes prêt à accepter l’opérateur :not avec le [style*=display:none] et d'autres sélecteurs annulés, qui ne fonctionnent que sur les styles en ligne et constituent une solution globalement médiocre.

13
dudewad

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

modifier:

à mon avis, il serait logique d’utiliser un peu d’interrogation ici:

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

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

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

 div [style = 'display: block;'] + tableau {
 filtre: flou (3px); 
}
7
Alex Grande

Solution Pure JS (par exemple, lorsque vous n'utilisez pas jQuery ou un autre framework pour d'autres tâches et que vous ne souhaitez 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/

6
panther

autrement, vous pouvez le faire avec JavaScript, dans Jquery, vous pouvez utiliser quelque chose comme:

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

* réédité

2
eveevans

Ce n'est pas possible avec CSS, mais vous pouvez le faire avec 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 (solution précédente): 

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

$items.each(function() {

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

});
2
martynas