:nth-of-type
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La fonction de 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
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:nth-of-type(even) {
border: 2px solid orange;
}
<dl>
<dt>Légumes :</dt>
<dd>1. Tomates</dd>
<dd>2. Concombres</dd>
<dd>3. Champignons</dd>
<dt>Fruits :</dt>
<dd>4. Pommes</dd>
<dd>5. Mangues</dd>
<dd>6. Poires</dd>
<dd>7. Oranges</dd>
</dl>
Syntaxe
css
:nth-of-type(<An+B> | even | odd) {
/* ... */
}
Paramètres
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.
Exemples
Exemple simple
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
Voir aussi
- La pseudo-classe
:nth-child - La pseudo-classe
:nth-last-of-type