Sélecteur CSS :nth-child()
Exemple
Spécifiez une couleur d'arrière-plan pour chaque élément <p> qui est le deuxième enfant de son parent :
p:nth-child(2)
{
background: red;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Le sélecteur correspond à chaque élément qui est le n ième enfant, quel que soit le type, de son parent.:nth-child(n)
n peut être un nombre, un mot clé ou une formule.
Astuce : regardez le sélecteur :nth-of-type() pour sélectionner l'élément qui est le n ième enfant, d'un type particulier , de son parent.
Version: | CSS3 |
---|
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le sélecteur.
Selector | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Syntaxe CSS
:nth-child(number) {
css declarations;
}
Plus d'exemples
Exemple
Odd et even sont des mots clés qui peuvent être utilisés pour faire correspondre des éléments enfants dont l'index est pair ou impair (l'index du premier enfant est 1).
Ici, nous spécifions deux couleurs d'arrière-plan différentes pour les éléments p pairs et impairs :
p:nth-child(odd)
{
background: red;
}
p:nth-child(even)
{
background: blue;
}
Exemple
À l' aide d'une formule ( an + b ). Description : a représente une taille de cycle, n est un compteur (commence à 0) et b est une valeur de décalage.
Ici, nous spécifions une couleur de fond pour tous les p éléments dont l'indice est un multiple de 3 :
p:nth-child(3n+0)
{
background: red;
}