:has() : pseudo-classe relationnelle

La pseudo-classe :has() sélectionne un élément s'il contient un descendant correspondant à l'argument. Souvent appelée « sélecteur parent », elle permet de styliser un élément parent en fonction de ses enfants, ce que CSS ne permettait pas auparavant.

.card:has(img) sélectionne tout élément .card qui contient un descendant img. L'argument est une liste de sélecteurs relatifs : tout sélecteur CSS valide décrivant des éléments par rapport à l'élément sujet.

Stylisez le conteneur d'un formulaire lorsqu'il contient une entrée non valide : form:has(:invalid) { border-color: red; }. Stylisez une section qui contient un titre : section:has(h2) { padding-top: 2rem; }. L'apparence du parent change en fonction de l'état de l'enfant.

:has() peut sélectionner des éléments frères précédents, ce que + et ~ ne permettent pas. h2:has(+ p) sélectionne les éléments h2 immédiatement suivis d'un élément p. li:has(~ .active) sélectionne les éléments li qui possèdent un élément frère .active situé après eux.

Réagissez à la validité native d'un formulaire sans JavaScript : input:has(~ .error-msg) applique un style à une entrée accompagnée d'un message d'erreur frère. label:has(+ input:required) applique un style aux libellés dont l'entrée associée est obligatoire, le tout uniquement avec CSS.

Mettez en évidence les conteneurs de navigation en fonction de leur enfant actif : nav:has(.active) applique des styles à toute la navigation lorsqu'un de ses enfants possède la classe active. Cette technique est utile pour indiquer, au niveau du conteneur, quelle section de navigation est actuellement sélectionnée.

.grid:has(.card:focus-within) applique un style à toute la grille lorsqu'une carte reçoit le focus au clavier. .dropdown:has(:hover) maintient une liste déroulante ouverte lorsque le pointeur survole l'un de ses descendants, ce qui est plus simple que de longues chaînes de combinateurs de frères.

.sidebar:has(nav) applique une mise en page différente de .sidebar:not(:has(nav)). Une mise en page conditionnelle sans JavaScript : la présence ou l'absence de certains enfants détermine la mise en page du parent, ce qui permet d'obtenir un CSS véritablement adaptatif et sensible au contenu.

:has() avec des sélecteurs d'arguments larges (par exemple :has(*)) peut être coûteux : le navigateur doit vérifier chaque élément. Gardez les arguments de :has() précis. Préférez :has(> .specific-child) (enfant direct) à :has(.specific-child) (descendant quelconque) lorsque c'est possible.

:has() est pris en charge par Chrome 105+, Safari 15.4+ et Firefox 121+. Sa prise en charge est complète selon la référence de compatibilité depuis la fin de 2023. Aucun module de compatibilité n'existe (il faudrait utiliser JavaScript pour simuler cette fonctionnalité) : utilisez-la avec une amélioration progressive dans les anciens navigateurs lorsque cette fonctionnalité n'est pas essentielle.

Voici des mécanismes qui nécessitaient auparavant des écouteurs d'événements JS : « ajouter une classe au parent lorsque l'enfant reçoit le focus », « afficher une superposition lorsqu'un déclencheur de fenêtre modale existe » et « appliquer une mise en forme différente à une grille lorsqu'elle contient exactement trois éléments ». :has() prend en charge tous ces cas de manière déclarative.

Qu'est-ce qui rend :has() unique par rapport aux combinateurs CSS existants comme + et ~ ?

:has() est la première véritable pseudo-classe relationnelle de CSS. Elle permet de sélectionner des parents et des frères précédents. Elle permet de styliser le contenu en fonction de sa structure, de réagir à l'état des formulaires, de mettre en évidence la navigation et de remplacer de nombreux mécanismes qui nécessitaient auparavant une manipulation du DOM avec JavaScript, le tout de manière déclarative en CSS.