Pseudo-classes intermédiairesComme 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:
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.
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:
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.
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:
Sélectionne le deuxième élément si celui-ci à la classe .element.
: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:
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.
: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:
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.
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:
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.