: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.
Exemple
#.chat p:nth-of-type(odd) {
justify-self: start;
background: #27272a;
}
.chat p:nth-of-type(even) {
justify-self: end;
background: #7c3aed;
}<style>
.chat p { margin: 0; padding: 6px 12px; border-radius: 12px; max-width: 75%; }
.chat time { justify-self: center; color: #71717a; font-size: 12px; }
</style>
<div class="chat stage" style="display: grid; gap: 6px;">
<time>10:02</time>
<p>Salut ! Ça avance, l’apprentissage de CSS ?</p>
<p>Bien, je m’entraîne justement sur les sélecteurs.</p>
<time>10:05</time>
<p>Essaie :nth-of-type(), ça ne compte que les paragraphes.</p>
<p>Ça marche ! Les heures ne perturbent pas l’ordre.</p>
</div>Les heures dans les balises time se trouvent entre les messages, mais elles ne perturbent pas l’alternance, car seuls les paragraphes sont comptés.
Définition et utilisation
#La pseudo-classe :nth-of-type() fonctionne comme :nth-child(), mais ne compte que les frères portant la même balise. Dans un article où les paragraphes alternent avec des images, p:nth-of-type(2) désignera le deuxième paragraphe, même si trois images le précèdent.
Elle accepte les mêmes arguments : un nombre, odd, even et la formule An+B. Ses versions sans argument sont :first-of-type et :last-of-type, et pour compter à partir de la fin il existe :nth-last-of-type().
Important : le « type » désigne le nom de la balise, pas la classe. Le sélecteur .card:nth-of-type(2) ne sélectionne pas la deuxième carte. Il sélectionne l’élément avec la classe card qui est le deuxième élément de sa balise (par exemple le deuxième div) dans le parent. Pour compter par classe, utilisez :nth-child(2 of .card).
Syntaxe
#:nth-of-type( <nombre> | odd | even | An+B )Arguments
#span 2
Le deuxièmespan, bien qu’il soit le troisième enfant du parent. Les élémentsemne sont pas comptés.em 1, em 3
Les élémentsemimpairs : le premier et le troisième. Chaque balise a son propre comptage.span 2, span 4
Les élémentsspanpairs, sans tenir compte desemplacés entre eux.span 3, span 4
Du troisième élémentspanjusqu’au dernier.rien
Pour comparer,span:nth-child(2)ne sélectionne rien, car le deuxième enfant du parent est unem.
Arguments en pratique
#2
span, bien qu’il soit le troisième enfant du parent. Les éléments em ne sont pas comptés.span:nth-of-type(2) { background: #7c3aed; color: #fff; }odd
em impairs : le premier et le troisième. Chaque balise a son propre comptage.em:nth-of-type(odd) { background: #7c3aed; color: #fff; }even
span pairs, sans tenir compte des em placés entre eux.span:nth-of-type(even) { background: #7c3aed; color: #fff; }n+3
span jusqu’au dernier.span:nth-of-type(n+3) { background: #7c3aed; color: #fff; }:nth-child(2)
span:nth-child(2) ne sélectionne rien, car le deuxième enfant du parent est un em.span:nth-child(2) { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Utilisez
:nth-of-type()quand différentes balises se mélangent dans le parent, par exemple des paragraphes, des images et des titres. - Ne l’associez pas à une classe en espérant qu’elle compte les classes. Elle ne compte que les balises ; pour les classes, utilisez
:nth-child(… of .classe).
Entrées associées
#- :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.
- :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.
- :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.
- Sélecteur de typeSélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
- :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.