SĂ©lecteurs
| SĂ©lecteur | Cible | Sens de lecture |
|---|---|---|
nth-child(n) |
N-ième élément enfant, tout type confondu | Du début vers la fin |
first-child(n) |
Premier élément enfant, quel que soit son type | |
nth-of-type(n) |
Première occurrence d'un élément enfant spécifique | |
last-child(n) |
Dernier élément enfant, quel que soit son type | De la fin vers le début |
last-of-type(n) |
Dernière occurrence d'un élément enfant spécifique |
n peut avoir pour valeur :
- un entier (positif ou négatif)
- un mot clé :
odd/even - une formule an + b, que je développe ci-après
Rappel
Les indices des éléments qui peuvent être ciblés par un sélecteur, commencent à 1.
n en tant que formule an + b :
Utilisation d'une formule (an + b). Description : a représente la taille d'un cycle , n est un compteur (commençant à 0) et B est une valeur de décalage.
— http://www.w3schools.com/cssref/sel_nth-child.asp
- Si n est positif, la sélection va dans le sens initié par le sélecteur,
ou si n est négatif, la sélection va dans le sens inverse de celui qui a été initié par le sélecteur; - Une valeur a, accolée à n permet d'effectuer des sauts de sélection : 2n = un élement sur deux, 3n = un élément sur trois, etc.
- La valeur de b décale la sélection à chaque itération, elle aussi en fonction de son signe (positif dans le sens de n, négatif dans le sens inverse de n).
Select the 1st element
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(1) { }ou
li:first-child { }Sélectionner le dernier élément
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:last-child { }Sélectionner l'avant-dernier élément
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-last-child(2) { }Sélectionner le 5e élément
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(5) { }Sélectionner les 3 premiers éléments
Ici on oriente la sélection des éléments vers zéro, en partant de trois.
On sélectionne donc le troisième, le deuxième, le premier.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(-n+3) { }Sélectionner tous les éléments sauf les 3 premiers
Ici on oriente la sélection des éléments vers l'infini, en partant du quatrième.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(n+4) { }Sélectionner les 3 derniers éléments
Ici, en partant de la fin, on oriente la sélection des éléments vers zéro, en partant du quatrième.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-last-child(-n+3) { }ou
li:nth-last-child(n+8) { }Sélectionner tous les éléments sauf les 3 derniers
Ici on oriente la sélection des éléments vers zéro, en partant du quatrième en partant de la fin.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(-n+7) { }ou
li:nth-last-child(n+4) { }Sélectionner un élément sur 4 en commençant par le 1er
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(4n+1) { }Sélectionner les éléments pairs
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(even) { }ou
li:nth-child(2n) { }Sélectionner les éléments impairs
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(odd) { }ou
li:nth-child(2n+1) { }