:nth-of-type
La pseudo-classe :nth-of-type()
correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.
/* Sélectionne chaque élément de type <p> dont
la position parmi l'ensemble des éléments de type <p>
descendants directement du même élément parent,
est un multiple de 4. */
p:nth-of-type(4n) {
color: lime;
}
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.
Pour une explication plus détaillée de sa syntaxe voir :nth-child
Syntaxe formelle
Error: could not find syntax for this item
Exemples
Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras
HTML
<div>
<div>Cet élément n'est pas compté.</div>
<p>1er paragraphe.</p>
<p>2e paragraphe.</p>
<div>Cet élément n'est pas compté.</div>
<p>3e paragraphe.</p>
<p>4e paragraphe.</p>
</div>
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;
}
Résultat
Spécifications
Specification |
---|
Selectors Level 4 # nth-of-type-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser