: nième-dernier-enfant - Astuces CSS

Le :nth-last-childsélecteur permet de sélectionner un ou plusieurs éléments en fonction de leur ordre d'origine, selon une formule. Elle est définie dans la spécification CSS Selectors Level 3 comme une «pseudo-classe structurelle», ce qui signifie qu'elle est utilisée pour styliser le contenu en fonction de sa relation avec les éléments parents et frères. Il fonctionne de la même manière que :nth-childsauf qu'il sélectionne les éléments en commençant par le bas de la commande source, pas par le haut.

Supposons que nous ayons une liste avec un nombre inconnu d'éléments et que nous souhaitons mettre en évidence l'avant-dernier élément (dans cet exemple exact, le «quatrième élément»):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

Plutôt que de faire quelque chose comme ajouter une classe à l'élément de liste (par exemple .highlight), nous pouvons utiliser :nth-last-child:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )

Comme vous pouvez le voir, :nth-last-childprend un argument: cela peut être un seul entier, les mots-clés «pair» ou «impair», ou une formule. Si un entier est spécifié, un seul élément est sélectionné, mais les mots-clés ou une formule parcourent tous les enfants de l'élément parent et sélectionnent les éléments correspondants, similaires à la navigation des éléments dans un tableau en JavaScript. Les mots-clés «pair» et «impair» sont simples (2, 4, 6 etc. ou 1, 3, 5 respectivement). La formule est construite en utilisant la syntaxe an+b, où:

"A" est une valeur entière
«N» est la lettre littérale «n»
«+» Est un opérateur et peut être «+» ou «-»
«B» est un entier et est obligatoire si un opérateur est inclus dans la formule

Il est important de noter que cette formule est une équation, et itère à travers chaque élément frère, déterminant lequel sera sélectionné. La partie «n» de la formule, si elle est incluse, représente un ensemble d'entiers positifs croissants (tout comme l'itération dans un tableau). Dans notre exemple ci-dessus, nous avons sélectionné un élément sur deux avec la formule 2n, ce qui fonctionnait car à chaque fois qu'un élément était vérifié, «n» augmentait de un (2 × 0, 2 × 1, 2 × 2, 2 × 3, etc.). Si l'ordre d'un élément correspond au résultat de l'équation, il est sélectionné (2, 4, 6, etc.). Pour une explication plus approfondie des mathématiques impliquées, veuillez lire cet article.

Pour illustrer davantage, voici quelques exemples de :nth-last-of-typesélecteurs valides :

Découvrez ce stylo!

Heureusement, vous n'avez pas toujours à faire le calcul vous-même - il existe plusieurs :nth-last-childtesteurs et générateurs:

Testeur CSS-Tricks
Testeur de Lea Verou

Points d'interêts

:nth-last-childitère à travers les éléments en commençant par le bas de l'ordre source. La seule différence entre lui et :nth-childest que ce dernier itère à travers les éléments en commençant par le haut de l'ordre source.
Le :nth-last-childsélecteur est très similaire à :nth-last-of-typemais avec une différence critique: il est moins spécifique. Dans notre exemple ci-dessus, ils produiraient le même résultat parce que nous n'itérons que des liéléments, mais si nous itérions sur un groupe plus complexe de frères et sœurs, :nth-last-childnous essaierions de faire correspondre tous les frères et sœurs, pas seulement les frères du même type d'élément. Cela révèle la puissance de :nth-last-child-it peut sélectionner n'importe quel élément frère dans un arrangement, pas seulement les éléments qui sont spécifiés avant les deux-points.

Prise en charge du navigateur

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
Travaux	3.2+	Travaux	9.5+	9+	Travaux	Travaux

:nth-last-childa été introduit dans CSS Selectors Module 3, ce qui signifie que les anciennes versions des navigateurs ne le prennent pas en charge. Cependant, la prise en charge des navigateurs modernes est irréprochable et les nouveaux pseudo-sélecteurs sont largement utilisés dans les environnements de production. Si vous avez besoin d'un support de navigateur plus ancien, polyfill pour IE ou utilisez ces sélecteurs de manière non critique à une amélioration progressive, ce qui est recommandé.