: nième de type - Astuces CSS

Le :nth-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.

Supposons que nous ayons une liste non ordonnée et que nous souhaitions alterner les éléments de la liste «zebra-stripe»:



First Item
Second Item
Third Item
Fourth Item
Fifth Item

Plutôt que d'ajouter des classes à chaque élément de la liste (par exemple .even& .odd), nous pouvons utiliser :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Comme vous pouvez le voir, :nth-of-typeprend un argument: cela peut être un seul entier, les mots-clés «pair» ou «impair», ou une formule comme indiqué ci-dessus. 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 les éléments de navigation dans un tableau en JavaScript. Les mots clés «pair» et «impair» sont simples, mais 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-of-typesélecteurs valides :

Découvrez ce stylo!

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

Testeur CSS-Tricks
Testeur de Lea Verou

Points d'interêts

:nth-of-typeitère parmi les éléments en commençant par le haut de l'ordre source. La seule différence entre lui et :nth-last-of-typeest que ce dernier itère à travers les éléments en commençant par le bas de l'ordre source.
Le :nth-of-typesélecteur est très similaire à :nth-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-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-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-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é.