Exemple
Spécifiez une couleur d'arrière - plan pour chaque <p> élément qui est le deuxième enfant de son parent:
p:nth-child(2)
{
background: #ff0000;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le :nth-child( n ) sélecteur correspond à chaque élément qui est le n ième enfant, indépendamment du type, de son parent.
n peut être un nombre, un mot - clé ou une formule.
Tip: Regardez le :) nième-of-type ( sélecteur pour sélectionner l'élément qui est le n ème enfant, of a particular 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-child() | 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-child(odd)
{
background: #ff0000;
}
p:nth-child(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-child(3n+0)
{
background: #ff0000;
}
Essayez - le vous - même »