Pseudo-classes avancées

: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.

: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 🟦.

: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 2^e élément de type span à avoir la classe .element.

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.

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é.

: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.