:nth-of-type
La pseudo-classe CSS :nth-of-type()
permet de cibler les éléments selon leur position parmi les voisins du même type (les mêmes noms de balise).
Exemple interactif
Syntaxe
La pseudo-classe nth-of-type
ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.
Voir :nth-child
pour une explication plus détaillée de sa syntaxe.
css
:nth-of-type(<an-plus-b> | even | odd) {
/* ... */
}
Exemples
Exemple simple
Dans cet exemple nous allons colorer un paragraphe sur deux avec des couleurs différentes et mettre le premier paragraphe en gras.
HTML
html
<div>
<div>Cet élément n'est pas compté.</div>
<p>1er paragraphe.</p>
<p class="fancy">2e paragraphe.</p>
<div>Cet élément n'est pas compté.</div>
<p class="fancy">3e paragraphe.</p>
<p>4e paragraphe.</p>
</div>
CSS
css
/* Paragraphes impairs */
p:nth-of-type(2n + 1) {
color: red;
}
/* Paragraphes pairs */
p:nth-of-type(2n) {
color: blue;
}
/* Premier paragraphe */
p:nth-of-type(1) {
font-weight: bold;
}
/* Cela ciblera le 3e paragraphe, car on cible les éléments impairs (2n+1) et qui ont la classe fancy.
Le deuxième paragraphe a bien la classe fancy, mais n'est pas ciblé, car pair (et non :nth-of-type(2n+1)) */
p.fancy:nth-of-type(2n + 1) {
text-decoration: underline;
}
Résultat
Spécifications
Specification |
---|
Selectors Level 4 # nth-of-type-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser