Pseudo-classes avancéesComme 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:
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.
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:
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.
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:
Sélectionne le carré #4 puisqu''il est le 2e é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.
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:
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é.
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:
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:
Sélectionne tous les éléments .element à l'exception des carrés 3, 4 et 5, puisqu'ils sont de type span.
La pseudo-classe :has() permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément.
Étant donné qu'il n'existe pas de sélecteur de voisin précédent, :has() peut devenir assez pratique dans certaines situations.
Dans l'exemple suivant, un parent sera sélectionné si son ou un de ses enfants est survolé.
Ainsi, on peut changer les propriétés d'éléments voisins en passant par le parent et la pseudo-classe :has().