Exemple
Spécifiez une couleur d'arrière - plan pour chaque <p> élément qui est le deuxième élément de p de son parent:
p:nth-of-type(2)
{
background: #ff0000;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le :nth-of-type( n ) sélecteur correspond à chaque élément qui est le n ème enfant, d'un type particulier, de son parent.
n peut être un nombre, un mot - clé ou une formule.
Tip: Regardez le : nth-child () sélecteur pour sélectionner l'élément qui est le n ième enfant, regardless of type , de son parent.
| Version: | CSS3 |
|---|
support du navigateur
Les chiffres dans le tableau indique la première version du navigateur qui prend en charge entièrement le sélecteur.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Syntaxe CSS
Autres exemples
Exemple
Mots - clés impaires et même sont qui peuvent être utilisés pour correspondre à des éléments enfants dont l' indice est impair ou pair (the index of the first child is 1) .
Ici, nous spécifions deux couleurs de fond différentes pour les éléments impairs et pairs p:
p:nth-of-type(odd)
{
background: #ff0000;
}
p:nth-of-type(even)
{
background: #0000ff;
}
Essayez - le vous - même » Exemple
En utilisant une formule ( an + b ) . Description: a représente une taille de cycle, n est un compteur (starts at 0) , et b est une valeur de décalage.
Ici, nous spécifions une couleur de fond pour tous les éléments p dont l'indice est un multiple de 3:
p:nth-of-type(3n+0)
{
background: #ff0000;
}
Essayez - le vous - même »