M

Contact

For any request, please use this form:

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 :

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

— 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
    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
css
Copy
li:nth-child(1) { }

or

css
Copy
li:first-child { }

Select the last element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
css
Copy
li:last-child { }

Select the second to last element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
css
Copy
li:nth-last-child(2) { }

Select the 5th element

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
css
Copy
li:nth-child(5) { }

Select the 3 first elements

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
css
Copy
li:nth-child(-n+3) { }

Select all elements except the first 3

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
css
Copy
li:nth-child(n+4) { }

Select the 3 last elements

Ici, soit 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
css
Copy
li:nth-last-child(-n+3) { }

or

css
Copy
li:nth-last-child(n+8) { }

Select all elements except the last 3

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
css
Copy
li:nth-child(-n+7) { }

or

css
Copy
li:nth-last-child(n+4) { }

Select every 4 elements strarting with the 1st one

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
css
Copy
li:nth-child(4n+1) { }

Select the even elements

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
css
Copy
li:nth-child(even) { }

or

css
Copy
li:nth-child(2n) { }

Select the odd elements

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
css
Copy
li:nth-child(odd) { }

or

css
Copy
li:nth-child(2n+1) { }

Comments

Leave a comment ?