:has() - Sélecteur CSS
Résumé des caractéristiques du sélecteur :has()
Description de la pseudo-classe :has().
La pseudo-classe :has() cible les éléments en fonction de leur(s) enfant(s).
Par exemple, le sélecteur td:has(img) cible les cellules de tableau qui contiennent au moins une image.
Plusieurs sélecteurs peuvent être énumérés dans les parenthèses de :has(). Cette liste est tolérante, ce qui signifie
que, si la syntaxe de certains des sélecteurs énumérés est incorrecte, cela n'invalide pas l'expression complète : :has()
traite le reste de la liste en ignorant les sélecteurs erronés.
Il suffit que au moins un des sélecteurs fournis dans les paramètres de :has() soit vrai.
:has() permet donc de cibler un élément en fonction de son contenu. Ne confondez pas les deux syntaxes suivantes :
td img cible les images contenues dans une cellule,
td:has(img) cible les cellules qui contiennent une image.
Le sélecteur :has() ne peut pas être imbriqué dans un autre sélecteur :has(). De même les pseudo-éléments ne peuvent
pas figurer dans la liste des sélecteurs. En effet plusieurs pseudo-éléments ciblent les éléments en fonction de leurs parents et le fait de
les inclure dans les paramètres de :has() peut créer boucles sans fin.
Performance.
Le sélecteur :has() présente néanmoins un inconvénient : il est peu performant car il oblige le navigateur à ré-explorer l'arbre du DOM
une deuxième fois, au moins en partie. Cependant les navigateurs ont maintenant bien intégré ce problème et les performances sont peu dégradées par
l'utilisation de :has().
Spécificité du sélecteur :has().
Bien que étant une pseudo-classe, la spécificité de :has() n'est pas fixée : elle dépend de sa liste de sélecteur. :has()
prend en effet la spécificité du sélecteur le plus spécifique parmi ceux qui lui sont fournis.
td:has(img) {...} Spécificité = 2
td:has(.class) {...} Spécificité = 11
td:has(#id, .class) {...} Spécificité = 101
Exemples d'utilisation de la pseudo-classe :has().
Cibler les cellules d'un tableau sauf la dernière de chaque ligne.
Le code CSS utilisé pour cet exemple cible les cellules qui sont suivies d'une autre cellule, autrement dit toutes les cellules sauf la dernière de chaque ligne.
| A1 | B1 | C1 | D1 | E1 |
| A2 | B2 | C2 | D2 | E2 |
Cibler les formulaires qui ont une saisie de mot de passe.
L'objectif de cet exemple est d'ajouter un message (ici en rouge) aux formulaires qui comportent une saisie de mot de passe,
c'est à dire une balise input type="password" .
Le sélecteur est un peu compliqué car il fait intervenir également le pseudo-élément ::after.
Dans un formulaire, cibler une zone autre que celle qui est testée.
Cochez la case dans le formulaire ci-dessous : la zone de saisie "Type de permis" passe en bleu. On a donc pu agir sur une autre zone que celle qui
est testée. :has() est le seul moyen de réaliser cela.
Compatibilité des navigateur avec :has().
La prise en charge de la pseudo-classe :has() est maintenant bien assurée par la plupart des grands navigateurs.
:has() qui cible des éléments en fonction de leurs enfants.:has()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Opéra
Safari sur IOS
Firefox
Firefox pour Androïd
Chrome
Edge
Androïd Brower
Chrome pour Androïd
KaiOS Browser
Opéra mini
Historique de la pseudo-classe :has().
-
Sélecteurs - Niveau 4
Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.
Concernant:has()Introduction de la pseudo-classe:has()dans la spécification des sélecteurs niveau 4.
29 Septembre 2011Document de travail.
Autres pseudo-classes conditionnelles.