Pseudo-classes intermédiaires

5

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.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de first-child, ainsi que cet article sur 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 🟦.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Pour en savoir plus, voir cet article MDN à propos de 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 et 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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Nth-child pair et 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).

Voir le CodePen de Simon Arnold (@smnarnold).

Nth-child et les 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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Nth-child et 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 ⬅.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Pour en savoir plus, voir cet article MDN à propos de nth-child.

Pour expérimenter avec nth-child css-tricks.com/examples/nth-child-tester

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Pour en savoir plus, voir cet article MDN à propos de nth-last-child.

Complétez les niveaux de 15 à 19 de CSS Diner 🍎

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme