:has()

Definition

Pseudo-classe relationnelle surnommée 'sélecteur parent'. Permet de cibler un élément en fonction de ses descendants, frères ou états internes sans JavaScript.

Analogie

Comme dire 'la maison QUI A un jardin' : on sélectionne le parent selon ce qu'il contient.

Exemple de code

/* Card avec image = layout horizontal */
.card:has(img) { display: flex; }
/* Form avec champ invalide = bordure rouge */
form:has(:invalid) { border: 2px solid red; }
/* Label quand son input est focus */
label:has(+ input:focus) { color: blue; }

Cas d'usage

Adapter dynamiquement les styles parents selon le contenu ou l'état des enfants, sans JS.

Anti-pattern

Termes lies