Sélecteur :NTH-OF-TYPE
Rôle
Le sélecteur nth-of-type est une pseudo-classe désigné par la syntaxe :nth-of-type(n) qui permet de cibler chaque élément qui est le n-ième enfant d’un type particulier de son parent.
Note : contrairement au sélecteur :nth-child(n), le compteur commence à partir du premier élément d’un type particulier trouvé et non pas à partir du premier enfant du parent.
La valeur (n) peut prendre plusieurs valeurs :
* un nombre qui représente le n-ième enfant d’un type particulier. Dans l’exemple ci-dessous, le deuxième paragraphe p est rouge.
p:nth-of-type(2){
color: red;
}
<h1>titre</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
Résultat
* un mot-clé : even ou odd.
Le sélecteur nth-of-type(even) représente les enfants d’un type particulier dont l’indice est pair et nth-of-type(odd) représente les enfants d’un type particulier dont l’indice est impair.
Dans l’exemple ci-dessous, les p de rang impair sont rouges et les p de rang pair sont verts.
p:nth-of-type(odd){
color: red;
}
p:nth-of-type(even){
color: green;
}
<h1>titre</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
Résultat
* une formule : an + b. La valeur ‘a’ représente un coefficient (que vous devez définir), ‘n’ est le compteur (commence par 0), et b est une valeur de décalage (que vous devez définir)).
Dans l’exemple ci-dessous, on cible le 1e, le 3e, le 5e.. p de body.
p:nth-of-type(2n+1){
color: red;
}
<h1>titre</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
Résultat
Version : CSS3
Compatibilité
Le sélecteur nth-of-type est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 9.
A voir aussi
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
only-child
:only-of-type
