Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

:has() - Sélecteur CSS

:has()

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

Description rapide
Pseudo-classe désignant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.
Statut
Problèmes de compatibilité
Module W3C
Sélecteurs
Références (W3C)
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 :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.

A1B1C1D1E1
A2B2C2D2E2

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
:has()
Estimation de la prise en charge en pourcentage du parc actuel.
90%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi : pseudo-classes conditionnelles.

  • :is()
  • Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.

  • :not()
  • Inverse l'action d'un sélecteur.

  • :where()
  • Pseudo-classe permettant de grouper des sélecteurs (équivalent du OU logique).

  • :else()
  • :has()
  • Pseudo-classe désignant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.