Est-il possible de sélectionner les n derniers éléments avec nth-child?

130

En utilisant une liste standard, j'essaie de sélectionner les 2 derniers éléments de la liste. J'ai plusieurs permutations de An+Bmais rien ne semble sélectionner les 2 dernières:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Je suis au courant d'un nouveau sélecteur CSS3 comme :nth-last-child()mais je préférerais quelque chose qui fonctionne dans quelques navigateurs supplémentaires si possible (ne vous souciez pas particulièrement d'IE).

css css-selectors Chèvre mécontente
la source
5
Nonobstant IE, le support du navigateur pour :nth-last-child()est à peu près le même que :nth-child() selon quirksmode.org . De plus, :nth-child()et :nth-last-child()ont tous deux été introduits dans CSS3, aucun n'est plus ancien ni plus récent dans ce sens.
BoltClock
De nombreuses nth-childastuces utiles sont résumées par css-tricks
m7913d

Réponses:

274

Cela sélectionnera les deux derniers iems d'une liste:

li:nth-last-child(-n+2) {color:red;}
<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>
Développer l'extrait

John Guise
la source
Oui mais vous utilisez :nth-last-child()ce qui a déjà été mentionné.
BoltClock
6
(-n + 2) => C'est ce que je recherche. Merci
Surjith SM
16
Cela devrait être la réponse acceptée, oui, le nth-last-child a déjà été mentionné, mais pas exactement comment (-n + b) est un truc cool
BlackTigerX
Impressionnant! Je vous remercie!
Yulian il y a
56

nth-last-childsemble avoir été spécialement conçu pour résoudre ce problème, je doute donc qu'il existe une alternative plus compatible. Le support semble assez décent , cependant.

Pekka
la source
Merci pour le lien - on dirait que le nth-child support est en fait le même que le nth-last-child (j'étais sûr que IE8 supportait le nth-child mais peut-être pas).
DisgruntledGoat
14

:nth-last-child(-n+2) devrait faire l'affaire

Danyl Sobolev
la source
1

En raison de la définition de la sémantique de nth-child, je ne vois pas comment cela est possible sans inclure la longueur de la liste des éléments impliqués. Le but de la sémantique est de permettre la ségrégation d'un groupe d'éléments enfants en groupes répétitifs ( modifier - merci BoltClock) ou dans une première partie d'une longueur fixe, suivie par "le reste". Vous voulez en quelque sorte l'opposé de cela, c'est ce nth-last-childqui vous donne.

Pointu
la source
1
Avec :nth-child()vous pouvez sélectionner les premiers méléments en spécifiant :nth-child(-n+m).
BoltClock
@BoltClock Je vais devoir y réfléchir pendant une seconde ... oh, eh bien oui vous avez raison à ce sujet. De toute façon, je ne suis pas en mesure de faire une déclaration sérieuse sur l'intention du comité lors de l'invention des sélecteurs CSS3 :-)
Pointy
-2

Si vous utilisez jQuery dans votre projet, ou êtes prêt à l'inclure, vous pouvez l'appeler nth-last-childvia son API de sélection (c'est cela simulé, il traversera le navigateur). Voici un lien vers un nth-last-childplugin. Si vous avez choisi cette méthode pour cibler les éléments qui vous intéressaient:

$('ul li:nth-last-child(1)').addClass('last');

Et puis stylisez à nouveau la lastclasse au lieu des sélecteurs nth-childou nth-last-childpseudo, vous aurez une expérience de navigation beaucoup plus cohérente.

Nathan Anderson
la source