:has() en CSS, quand vos styles s’adaptent au contenu

Alors j’étais complètement passé à côté, mais cette fois ça y est, depuis le 19 Décembre dernier, Firefox accepte enfin la propriété CSS .has()!
Etrangement, les autres principaux browsers avaient déjà fait le pas mais firefox et c’est +/-8% de part de marché n’avait pas encore suivit le mouvement.

Si certain avait décidé de déjà l’utiliser, je préférais attendre les 8% manquant histoire d’avoir quelque chose de bien similaire partout.

Et ça fait quoi?

La propriété :has() permet de sélectionner un élément en fonction de son contenu.

En d’autres termes, si vous souhaitez sélectionner toutes les balises <li> qui contiennent une balise <a> vous pouvez le faire directement en css sans devoir appliquer de javascript qui va vite devenir contraignant. 

Mais comment ça marche ?

Reprenons notre exemple de liste qui pourrait être un menu

<ul>
    <li><a href=”#”>Menu01</a></li>
    <li><a href=”#” class=”active”>Menu02</a></li>
    <li>No link</li>
</ul>

Si vous désirez appliquez un style sur chaque <li> qui contient une balise <a>, il vous suffit de faire ceci:

li:has(a) {
    backgroung: red;
}

Vous pouvez évidemment être encore plus précis en imbriquant les sélecteurs

li:has(a.active) {
    backgroung: green;
}

Conclusion

Cette propriété va simplifier la vie de pas mal de monde car les cas pratiques sont infini: cibler un parent d'élément actif dans un menu, stylisé des conteneurs en fonction du contenu, appliquer des styles conditionnels dans des formulaires, identifier et modifier des éléments contenant des sous-menus, ou encore gérer des interactions complexes sans recourir au JavaScript.