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