: nth-last-of-type - Astuces CSS

Le :nth-last-of-typesé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-of-typesauf 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 non ordonnée 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-of-type:

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

Comme vous pouvez le voir, :nth-last-of-typeprend 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 - de la même manière que la navigation dans les éléments d'un tableau en JavaScript. Les mots clés «pair» et «impair» sont simples (respectivement 2, 4, 6, etc. ou 1, 3, 5, etc.). 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 :

Voir les astuces CSS Pen:: nth-last-of-type de Chris Coyier (@chriscoyier) sur CodePen.

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

Testeur CSS-Tricks
Testeur de Lea Verou

Points d'interêts

:nth-last-of-typeitère à travers les éléments en commençant par le bas de l'ordre source. La seule différence entre lui et :nth-of-typeest que ce dernier itère à travers les éléments en commençant par le bas de l'ordre source.
Le :nth-last-of-typesélecteur est très similaire à :nth-last-childmais avec une différence critique: il est plus 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 le pouvoir de :nth-last-of-type-it cible un type d'élément particulier dans un arrangement avec des frères et sœurs similaires, pas tous les frères et sœurs.

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-of-typea é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é.