:has() - Sélecteur CSS

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.

: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.

Exemples d'utilisation de :has().

Ces exemples ne fonctionneront pas sur Firefox   puisque ce navigateur ne traite toujours pas la pseudo-classe :has() (2022).

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.

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.

Compatibilité des navigateurs.

La prise en charge de la pseudo-classe :has() n'est toujours pas assurée par de nombreux navigateurs, dont Firefox  .

1

Pseudo-classe
:has()

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe :has().

• Sélecteurs - Niveau 4

  Introduction de la pseudo-classe :has() dans la spécification des sélecteurs niveau 4.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Autres pseudo-classes conditionnelles.

⚠
:any()
Pseudo-classe obsolète. A été remplacée par :is().
:defined
Pseudo-classe désignant les éléments définis (notion variable suivant le langage).
:is()
Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.
⚠
:matches()
Pseudo-classe obsolète, remplacée par is().
:not()
Pseudo-classe pour inverser l'action d'un sélecteur.
:where()
Pseudo-classe permettant de grouper des sélecteurs (équivalent du OU logique).