`:has()` - Sélecteur CSS

:has()

Résumé des caractéristiques du sélecteur `:has()`

Description rapide

Pseudo-classe ciblant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

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 la pseudo-classe `: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.

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.

Compatibilité des navigateurs.

La prise en charge de la pseudo-classe :has() est maintenant bien assurée par la plupart des grands navigateurs.

Colonne 1

Prise en charge par les navigateurs du sélecteur par pseudo-classe :has() qui cible des éléments en fonction de leurs enfants.

Pseudo-classe
:has()

Estimation de la prise en charge globale.

94%

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

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

Caniuse

Historique de la pseudo-classe `:has()`.

Sélecteurs - Niveau 4

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

29 Septembre 2011
Document de travail.