Pseudo-classes avancées

5

First-of-type & Last-of-type

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

Contrairement à first-child et last-child qui ne sélectionnent uniquement un élément que s'il correspond au sélecteur ET qu'il est au premier ou dernier index de son groupe, :first-of-type et :last-of-type sélectionnent le premier élément correspondant au sélecteur à partir du début et à partir de la fin, même s'il n'est pas exactement au premier ou dernier index.

Par exemple, la règle suivante:

span:first-of-type { ... }

Recherche dans un groupe le premier élément de type span. Si un élément est trouvé, il est sélectionné.

Dans les exemples ci-dessous, tous les carrés ont la classe .element. Cependant, seuls les carrés 3, 4 et 5 sont des <span>, les autres étant des <div>. Donc à gauche span:first-of-type sélectionne le carré #3 et le rend bleu 🟦, tandis qu'à droite span:last-of-type sélectionne le carré #5.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de first-of-type, ainsi que cet article à propos de last-of-type.

Only-of-type

Sélectionne un élément lorsqu'il est le seul de son type dans un groupe. Bref, lorsque l'élément est à la fois le :first-of-type et le :last-of-type de son groupe.

Par exemple, la règle suivante:

span.element:only-of-type { ... }

Valide à l'intérieur de chaque groupe d'éléments si un seul enfant à la classe .element et est de type span. 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 (3, 4 et 5) sont des <span>, donc aucun d'entre eux n'est sélectionné. Tandis qu'à droite, un seul enfant (4) est un <span>, donc :only-of-type le sélectionne et le rend bleu 🟦.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article de MDN à propos d'only-of-type.

Nth-of-type & Nth-last-of-type

Ces pseudo-classe fonctionnent sur le même principe que nth-child et nth-last-child à la différence que les sélections sont basées sur l'index des éléments correspondant au sélecteur et non à l'index réel de l'élément dans son groupe.

Par exemple, la règle suivante:

span.element:nth-of-type(2) { ... }

Sélectionne le carré #4 puisqu'il est le 2e élément de type span à avoir la classe .element.

Voir le CodePen de Simon Arnold (@smnarnold).

Les mots-clés even et odd, les occurrences n et les décalages -/+ sont tous aussi disponibles avec ces pseudo-classes.

Empty

Comme son nom l'indique, :empty permet de sélectionner les éléments vides s'ils correspondent au sélecteur passé avant le :.

Par exemple, la règle suivante:

.element:empty { ... }

Valide si un ou plusieurs éléments avec la classe .element sont vides.

Dès qu'un enfant est présent à l'intérieur de la balise, l'élément n'est plus vide. Un simple espace compte comme un enfant, même si rien n'est visible à l'écran.

Dans l'exemple ci-dessous, les carrés #2 et #5 n'ont plus de contenu. Cependant, le carré #2 contient toujours un espace. Il n'est donc pas sélectionné puisqu'il n'est pas à proprement parler vide. Le carré #5 ne contient absolument rien, ce dernier est donc sélectionné.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de empty.

Not

La pseudo-classe :not() permet de sélectionner tous les éléments ne correspondant pas au sélecteur passé entre parenthèses.

Par exemple, la règle suivante:

:not(span)

Sélectionne tous les éléments qui ne sont pas des <span>.

Il est aussi possible de raffiner un sélecteur de base en lui ajoutant la pseudo-classe :not() pour ainsi ne garder que les éléments qui correspondent au premier sélecteur et non au deuxième.

Par exemple, la règle suivante:

.element:not(span) { ... }

Sélectionne tous les éléments .element à l'exception des carrés 3, 4 et 5, puisqu'ils sont de type span.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de not.

Complétez les niveaux de 20 à 32 de CSS Diner 🍎

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