CSS dernier enfant (-1)

161

Je recherche un sélecteur css qui me permette de sélectionner le pré-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, ne valide pas, et nth-last-child ne semble pas non plus fournir un moyen dynamique .. Je peux me replier sur javascript mais je me demande s'il y a un moyen css que j'ai négligé

css css-selectors

— Hedde van der Heide
source

Il est généralement appelé «avant-dernier». Il y a aussi un autre mot de fantaisie pour cela: "avant-dernier".

— BoltClock

@BoltClock J'adore le mot "avant-dernier". Je vais l'utiliser dans une mise à jour sournoise de Facebook, maintenant.

— Andrew Barber

Reproduction possible de l' avant-dernier élément Select avec css

— Castro Roy

Merci à tous ceux qui ont mentionné l'avant-dernier - cela est apparu n ° 1 sur Google pour "css penultimate".

— chakeda le

Réponses:

303

Vous pouvez utiliser :nth-last-child(); en fait, d'ailleurs :nth-last-of-type()je ne sais pas quoi d'autre vous pourriez utiliser. Je ne suis pas sûr de ce que vous entendez par «dynamique», mais si vous voulez dire si le style s'applique au nouvel avant-dernier enfant lorsque d'autres enfants sont ajoutés à la liste, oui, ce sera le cas. Violon interactif.

ul li:nth-last-child(2)

— BoltClock
source

D'accord, ça marche! L'interprétateur de code (jsfiddle) ne l'a pas validé. Devinez un bug de leur côté! merci

— Hedde van der Heide

@David Allen: Je ne pense pas qu'il se soucie s'il essaie déjà d'utiliser :nth-child(5)et :last-child. Des commentaires comme celui-ci devraient soit aller sur la question, soit être réservés à eux-mêmes.

— BoltClock

Il ne connaît peut-être pas le problème de l'absence de support. Je le souligne juste .... J'ai donné une réponse en utilisant jQuery et je serai heureux de dire que cela ne fonctionnera pas avec les utilisateurs avec JavaScript désactivé. mais plus de gens utilisent IE7 / 8 que JS diabled

— David Allen

@David, je crois que le plugin selectivrz ou modernizr peut résoudre ce problème, je vais devoir consulter la documentation

— Hedde van der Heide

@ArgsKwargs Un excellent commentaire n'a jamais entendu parler de selectivizr. Faites-nous savoir si cela prend en charge nth-last-child

— David Allen

Sauf si vous pouvez demander à PHP d'étiqueter cet élément avec une classe, il vaut mieux utiliser jQuery.

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

— David Allen
source

C'est carrément ennuyeux que jQuery ne soit pas implémenté :nth-last-child()simplement parce que John pense que personne ne l'utilise .

— BoltClock

Je préfère étiqueter avec python ;-) ontopic: Eh bien css semble bien de cette façon, peut-être que jsfiddle pense aussi que personne ne l'utilise :-)

— Hedde van der Heide

@ArgsKwargs: étrange pourquoi cela ne fonctionnerait pas dans jsFiddle. C'est au navigateur de l'interpréter; il n'a pas son propre moteur CSS.

— BoltClock

@BoltClock ne vous méprenez pas, cela fonctionne, l'assistant de code (visualisation des couleurs) indique simplement quelque chose de non fermé (donc je n'ai même pas essayé)

— Hedde van der Heide

Je ne pense pas qu'aucun code ne soit divulgué. Mais je sais ce que vous voulez dire à propos de la "visualisation des couleurs"

— David Allen