CSS last-child(-1)

Question

Je cherche un sélecteur css qui me permette de sélectionner l'avant-dernier enfant de la liste.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li> <!-- select the pre last item dynamically no matter how long this list is -->
     <li>6</li>
</ul>

Méthode statique :

ul li:nth-child(5)

Méthode dynamique :

ul li:last-child(-1)

ce qui, bien sûr, n'est pas validé, de même que nth-last-child ne semble pas fournir un moyen dynamique Je peux me rabattre sur javascript mais je me demande s'il n'y a pas une méthode css que j'ai négligée.

Answer 1

Vous peut utiliser :nth-last-child() En fait, en plus de :nth-last-of-type() Je ne sais pas ce que vous pourriez utiliser d'autre. Je ne suis pas sûr de ce que vous entendez par "dynamique", mais si vous voulez dire que le style s'applique au nouvel avant-dernier enfant lorsque d'autres enfants sont ajoutés à la liste, oui, il le fera. Violon interactif.

ul li:nth-last-child(2)

Answer 2

À moins que vous ne puissiez faire en sorte que PHP étiquette cet élément avec une classe, il est préférable d'utiliser jQuery.

jQuery(document).ready(function () {
  $count =  jQuery("ul li").size() - 1;
  alert($count);
  jQuery("ul li:nth-child("+$count+")").css("color","red");
});