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

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

Disons que ceci est la mise en page HTML:

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

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

Par exemple, si jQuery est implémenté 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 identifiant entouré des divs que vous sélectionnez, auquel cas votre code ressemblera à ceci:

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

Il y a une solution css pure (CSS3) si votre div est caché en utilisant l’atsortingbut “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’atsortingbut 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 dieu

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

modifier:

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

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

La vraie réponse à cette question est que vous ne pouvez pas le faire. Les alternatives aux réponses uniquement en CSS ne sont pas des réponses correctes à cette question, mais si les solutions JS vous conviennent, alors vous devriez choisir l’une des réponses JS ou jQuery ici. Cependant, comme je l’ai dit plus haut, la vraie réponse correcte est que vous ne pouvez pas faire cela en CSS de manière fiable à moins d’accepter l’opérateur :not avec [style*=display:none] et d’autres sélecteurs de ce type, qui travaille sur des styles en ligne et constitue une solution globalement médiocre.

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

 
A
B
C
D
E

http://jsfiddle.net/uEeaA/90/

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

Je l’utilise pour faire du CSS sur l’élément suivant lorsque le précédent est visible:

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

autrement dit, 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.

JSFIDDLE DEMO

jQuery:

 $('li').not(':hidden').last().addClass("red"); 

HTML:

 
  • Item 1
  • Item 2
  • Item 3
  • Item 4

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; } }); 

Cela a fonctionné pour moi.

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