Le sélecteur :nth-of-type 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 4 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.

Supposons que nous ayons une liste non ordonnée et que nous souhaitions "zébrer" les éléments de la liste en alternance :

<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 des classes à chaque élément de la liste (par exemple .even (pair) & .odd (impair)), 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-type prend un argument : il peut s'agir d'un seul nombre entier, des mots-clés even ou odd, ou d'une formule comme indiqué ci-dessus. Si un nombre entier est spécifié, un seul élément est sélectionné, mais les mots-clés ou une formule itéreront à travers tous les enfants de l'élément parent et sélectionneront les éléments correspondants — ce qui est similaire à la navigation dans un tableau en JavaScript. Les mots-clés even et odd sont simples, mais 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-of-type valides :

voir CSS-Tricks: :nth-of-type 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-of-type itère à travers les éléments en commençant par le haut de l'ordre des sources. La seule différence entre ce sélecteur et :nth-last-of-type est que ce dernier parcourt les éléments en commençant par le bas de l'ordre des sources.
• Le sélecteur :nth-of-type est très similaire à :nth-child mais avec une différence essentielle : il est plus 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-child essaierait de correspondre à tous les frères et sœurs, et pas seulement aux frères et sœurs du même type d'élément. Cela révèle la puissance de :nth-of-type : il cible un type d'élément particulier dans un arrangement par rapport à des frères et sœurs similaires, et non pas tous les frères et sœurs.