:nth-child() vs :nth-of-type()
nth-child() compte tous les éléments du parent, quelle que soit la balise. nth-of-type() compte seulement les frères avec la même balise que le sélecteur choisi.
Comparaison point par point
#Ce qu’elle compte
- :nth-child()
- Tous les éléments du parent, quelle que soit la balise
- :nth-of-type()
- Seulement les frères avec la même balise
Syntaxe de l’argument
- :nth-child()
- nombre,
odd,even,An+B - :nth-of-type()
- Les mêmes formules : nombre,
odd,even,An+B
Comptage par classe (`of sélecteur`)
- :nth-child()
- Oui, par ex.
:nth-child(2 of .hot) - :nth-of-type()
- Non, ne compte que les balises
Versions sans argument
- :nth-child()
:first-child,:last-child- :nth-of-type()
:first-of-type,:last-of-type
Piège typique
- :nth-child()
- Des balises mélangées dans le parent donnent un résultat surprenant
- :nth-of-type()
- Il faut se rappeler qu’elle ne compte que la balise donnée, pas la classe
Utilisation typique
- :nth-child()
- Lignes alternées dans un tableau :
tr:nth-child(even) - :nth-of-type()
- Paragraphe dans un article avec des images entrecoupées
Exemple
#p:first-child { background: #7c3aed; color: #fff; }<article class="stage">
<h4 style="margin: 0 0 6px;">Titre</h4>
<p style="margin: 0 0 6px;">Premier paragraphe</p>
<p style="margin: 0;">Deuxième paragraphe</p>
</article>Rien ne se met en surbrillance : le premier enfant de l’article est h4, pas un paragraphe.
Définition et utilisation
#La pseudo-classe :nth-child() numérote tous les enfants du parent, en commençant à 1, quelle que soit leur balise. Elle accepte un nombre précis, les mots odd et even, ou une formule An+B, exactement comme sa pseudo-classe sœur.
:nth-of-type() utilise la même syntaxe d’argument, mais ne compte que les frères qui partagent la même balise que l’élément à gauche du sélecteur. Dans un parent où des paragraphes alternent avec des images, p:nth-of-type(2) désignera le deuxième paragraphe, même si d’autres éléments le précèdent.
Un piège classique est p:first-child, qui ne cible rien si un titre précède le premier paragraphe, car le premier enfant du parent est justement ce titre. p:first-of-type résout ce problème. À l’inverse, seule :nth-child() comprend la syntaxe plus récente of <sélecteur>, c’est-à-dire compter par classe plutôt que par balise.
Syntaxe
#:nth-child( <nombre> | odd | even | An+B [of <sélecteur>]? )
:nth-of-type( <nombre> | odd | even | An+B )Plus d’exemples
#p:first-of-type { background: #7c3aed; color: #fff; }<article class="stage">
<h4 style="margin: 0 0 6px;">Titre</h4>
<p style="margin: 0 0 6px;">Premier paragraphe</p>
<p style="margin: 0;">Deuxième paragraphe</p>
</article>Cette fois, le premier paragraphe se met en surbrillance, même s’il vient après le titre dans le code.
span:nth-of-type(even) { background: #7c3aed; color: #fff; }<div class="stage" style="display: flex; gap: 6px; flex-wrap: wrap;">
<span class="box">1</span><em>a</em><span class="box">2</span><span class="box">3</span><em>b</em><span class="box">4</span>
</div>nth-of-type ne compte que parmi les éléments span (2 et 4), sans tenir compte des em placés entre eux. nth-child(even) aurait désigné des éléments totalement différents.
Bonnes pratiques
#- Quand le parent mélange des balises différentes,
:nth-of-type()donne généralement un résultat plus prévisible que:nth-child(). - Seule
:nth-child()comprend la syntaxe "of sélecteur", par ex.:nth-child(2 of .hot), c’est-à-dire compter par classe. - Piège classique :
p:first-childne fonctionne pas si un titre précède le premier paragraphe. Utilisezp:first-of-type.
Entrées associées
#- :nth-child()Sélectionne des éléments selon leur position parmi leurs frères : un sur deux, un sur trois, les trois premiers ou tous à partir du septième.
- :nth-of-type()Sélectionne des éléments selon leur position parmi les frères portant la même balise, par exemple une image sur deux ou le troisième paragraphe.
- :first-childCorrespond à l’élément qui est le premier enfant de son parent.
- :last-childCorrespond à l’élément qui est le dernier enfant de son parent.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.