Pseudo-classes intermédiaires

:first-child & :last-child

Comme leurs noms l'indiquent, :first-child et :last-child permettent de sélectionner le premier et dernier élément dans un groupe s'ils correspondent au sélecteur passé avant le :.

Par exemple, la règle suivante:

.element:first-child { ... }

Valide à l'intérieur de chaque groupe d'éléments si le premier enfant à la classe .element. Si tel est le cas, l'élément est sélectionné.

Ci-dessous à gauche :first-child est utilisé afin de rendre bleu 🟦 le premier enfant du groupe, tandis qu'à droite :last-child fait la même chose, mais pour le dernier.

:first-child :first-child :last-child :last-child :only-child

Sélectionne un élément lorsqu'il est enfant unique de son élément parent. Bref, lorsque l'élément est à la fois le :first-child et le :last-child de son groupe.

Par exemple, la règle suivante:

.element:only-child { ... }

Valide à l'intérieur de chaque groupe d'éléments si un seul enfant est présent et si celui-ci possède la classe .element. Si tel est le cas, l'élément est sélectionné.

Dans l'exemple ci-dessous, tous les carrés ont la classe .element. Cependant, à gauche, plusieurs enfants sont présents, donc aucun d'entre eux n'est sélectionné. Tandis qu'à droite, un seul enfant est présent, donc :only-child le sélectionne et le rend bleu 🟦.

Ce type de pseudo-classe peut être pratique par exemple pour retirer la puce • d'un élément de liste s'il est le seul élément présent dans sa liste.

:only-child :only-child :nth-child()

La pseudo-classe nth-child permet de sélectionner un ou plusieurs éléments selon leur index dans un groupe. Afin de spécifier quels éléments devraient être sélectionnés, il faut spécifier une formule entre parenthèses.

:nth-child & index

L'option la plus simple est de sélectionner un élément à partir de son index tout simplement. Pour ce faire, il suffit de spécifier directement l'index désiré entre parenthèses.

Par exemple, la règle suivante:

.element:nth-child(2) { ... }

Sélectionne le deuxième élément si celui-ci à la classe .element.

En JavaScript les index commencent à 0, mais en CSS à 1.

:nth-child() pair & impair

Nth-child permet grâce aux mots-clés even et odd de sélectionner tous les éléments pairs ou impairs qui correspondent au sélecteur avant le :.

Par exemple, à gauche tous les éléments pairs sont sélectionnés grâce à nth-child(even). Tandis qu'à droite tous ceux impairs sont sélectionnés via nth-child(odd).

:nth-child() & occurrences

En ajoutant à un index le suffixe n, il est possible d'indiquer que toutes les N occurrences devraient être sélectionnées.

Par exemple, la règle suivante:

.element:nth-child(3n) { ... }

Spécifie un interval de 3. Si les éléments à ces index ont la classe .element, ceux-ci sont alors sélectionnés.

Dans l'exemple suivant, puisque tous les éléments ont la classe .element, ceux aux index 3, 6 et 9 sont donc sélectionnés.

Sans le n, seulement le 3e élément serait sélectionné.

:nth-child() & décalage

Sélectionner par N occurrences est pratique et puissant, mais il est parfois nécessaire de sélectionner à partir d'un index de départ différent, d'où les options de décalage.

Par exemple, la règle suivante:

.element:nth-child(3n-2) { ... }

Spécifie un interval de 3, comme dans l'exemple précédent, mais indique de décaler chaque sélection de 2 en amount ⬅.

L'inverse aurait aussi été possible en utilisant :nth-child(3n+2) pour sélectionner en aval ➡ plutôt qu'en amont.

:nth-child() :nth-child()

OUTIL :nth Tester Pour expérimenter avec :nth-child().
EXERCICE Pseudo-classes - Grille Pour cet exercice, vous devrez à l’aide de pseudo-classes sélectionner les cases adéquates dans une grille afin de reproduire différentes mises en page.
:nth-last-child()

Cette pseudo-classe fonctionne sur le même principe que nth-child à la différence que les sélections se font à partir de la fin et non du début.

Par exemple, la règle suivante:

.element:nth-last-child(2) { ... }

Sélectionne l'avant-dernier élément si celui-ci à la classe .element.

Les mots-clés even et odd, les occurences n et les décalages -/+ sont tous aussi disponibles avec cette pseudo-classe.

:nth-last-child() :nth-last-child()
EXERCICE CSS Diner - Niveaux 15 à 19 Complétez les niveaux 15 à 19 de CSS Diner 🍎
Résumé vidéo