Ce tutoriel explique l’utilité des pseudo-classes fonctionnelles en CSS pour cibler des éléments de manière plus efficace et lisible :
-
:is(): Permet de regrouper plusieurs sélecteurs (logique OU) pour appliquer les mêmes styles, réduisant la redondance.
Exemple ::is(h1, h2, h3) { color: [#333](https://raphael.salique.fr/liens/./add-tag/333); } -
:not(): Exclut un élément d’une sélection, utile pour appliquer des styles à tous sauf à quelques exceptions.
Exemple :li:not(:last-child) { border-bottom: 1px solid [#ccc](https://raphael.salique.fr/liens/./add-tag/ccc); } -
:where(): Similaire à:is(), mais avec une spécificité nulle, idéal pour des styles de base facilement surchargeables.
Exemple ::where(header, main, footer) { margin: 1rem 0; } -
:has(): Cible un élément parent en fonction de ses descendants, une nouveauté puissante pour des sélections contextuelles.
Exemple :article:has(img) { border: 2px solid red; }
Ces sélecteurs améliorent la concision et la maintenabilité du code CSS.
