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

Supposons que nous ayons une liste avec un nombre inconnu d'éléments et que nous souhaitions mettre en évidence l'avant-dernier élément, dans cet exemple précis, le quatrième élément ("Fourth Item") :

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

Plutôt que d'ajouter une classe à l'élément de la 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-child prend un argument : il peut s'agir d'un seul nombre entier, des mots-clés "even" (pair) ou "odd" (impair), ou d'une formule. Si un nombre entier est spécifié, un seul élément est sélectionné — mais les mots-clés ou une formule vont itérer à travers tous les enfants de l'élément parent et sélectionner les éléments correspondants — ce qui est similaire à la navigation dans un tableau en JavaScript. Les mots-clés "even" et "odd" sont simples (2, 4, 6 etc. ou 1, 3, 5 respectivement). La formule est construite à l'aide de la syntaxe an+b, où :

• "a" est une valeur entière
• "n" est la lettre "n" littérale
• "+" est un opérateur et peut être soit "+", soit "-".
• "b" est un nombre entier et est requis 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 celui qui 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 a fonctionné car à chaque fois qu'un élément était vérifié, "n" augmentait d'une unité (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 sélecteurs :nth-last-of-type valides :

voir CSS-Tricks: :nth-last-child de zakkain dans CodePen

Heureusement, vous ne devez pas toujours faire les calculs vous-même. Il existe plusieurs testeurs et générateurs de type :nth-of :

• Testeur CSS-Tricks
• Testeur de Léa Verou

À noter

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