Le sélecteur CSS :has() permet de cibler un parent selon son contenu. « Parent selector » enfin disponible : card:has(img), form:has(:invalid), etc. Moins de JavaScript pour le style conditionnel.
La syntaxe parent:has(enfant) sélectionne le parent si l'enfant correspond. Exemples : styliser une carte qui contient une image, un formulaire avec des champs invalides, une liste avec un élément actif. Les navigateurs modernes (Chrome, Safari, Firefox) supportent :has(). Pour les design systems et les composants réutilisables, :has() évite des classes ou du JS uniquement pour le style. Combiné à d'autres sélecteurs (niveau 4), il simplifie beaucoup de cas.
Conseil : vérifier le support sur les cibles et éviter les sélecteurs :has() trop lourds (perf).
Points forts / Points faibles
Points forts
- Style conditionnel sans JavaScript
- Code plus déclaratif et maintenable
- Support navigateurs désormais large
- Formulaires et cartes plus simples à styliser
Points faibles
- Spécificité et performance à surveiller
- Anciens navigateurs non supportés (fallbacks)
- Documentation et bonnes pratiques en consolidation