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
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

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
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
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
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
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
source