Blog iamvdo.meElle permet de cibler le n-ième enfant d’un élément.
nth... késako ?
nth signifie n-ième. Ce sélecteur permet donc de sélectionner le/les n-ièmes enfants d’un élément. Il y a plusieurs façon de procéder :
- Valeur numérique entière (cible un seul enfant)
- Valeur de
n, éventuellement suivie d’une valeur entière ajoutée ou soustraite.
/*cible le deuxième li de chaque ul*/
ul li:nth-child(2){ ... }
/*cible le 2e, le 4e, le 6e... li de chaque ul*/
ul li:nth-child(2n+2){ ... }Comprendre le fonctionnement
C’est en fait très simple à comprendre : pour chaque entier supérieur ou égal à 0, je remplace la valeur de n et je trouve les éléments sélectionnés.
Ainsi, 2n+2 nous donne 2*0+2=2, 2*1+2=4, 2*2+2=6 et ainsi de suite.
Par exemple, 8n-3 nous donne : 8*0-3=-3, 8*1-3=5, 8*2-3=13, etc. Les 5e, 13e, 21e, ... enfants seront ciblés.
Attention, pour sélectionner le/les n-ièmes enfants d’un certain type, reportez-vous à :nth-of-type()
#1par Reg, le 19 juillet 2012
"Ainsi, 2n+2 nous donne 2*0+2=2, 2*1+2=2, 2*2+2=6 et ainsi de suite."
2*1+2=2 ?? Mmmm .. :p
Merci pour cette explication.
#2par css3create, le 19 juillet 2012
@Reg : Ah les copiés-collés ! ;) C’est corrigé. Merci