CSS :has() le sélecteur de parent, mais bien plus encore !

Raphael - Alsacreations - 18/01

La pseudo-classe :has() réalise le fantasme historique de pouvoir enfin "cibler le parent" en CSS… mais elle fait bien plus que ça !

:has() est une pseudo-classe CSS issue des spécifications "Selectors level 4" où elle est décrite comme "sélecteur relationnel".

Le sélecteur :has() cible un élément en relation avec la liste d'arguments qu'il contient au sein de ses parenthèses. Cela permet de cibler un parent ou ancêtre, mais également un frère précédent dans le DOM.

Commençons justement par une énumération d'exemples de ce qu'est capable de réaliser :has()…

Quelques exemples simples

Je cible l'élément <a> à condition qu'il contienne un descendant <img> :

a:has(img) { }

Je cible l'élément <a> à condition qu'il contienne un enfant direct <img> :

a:has(> img) { }

Je cible n'importe quel élément du DOM à condition qu'il contienne un descendant <img> :

:has(img) { }

Je cible l'élément <button> à condition qu'il contienne un descendant de classe .icon ou de classe .text :

button:has(.icon, .text) { }

Je masque l'élément <svg> s'il contient un descendant <symbol> ou <defs> :

svg:has(symbol, defs) { display: none; }

Je cible l'élément de classe .con...
[Courte citation de 8% de l'article original]