CSS peut-il sélectionner les parents en fonction de leurs éléments enfants ?

Sélecteur CSS pour les éléments avec un enfant spécifique

Cette question explore la possibilité de sélectionner des éléments en fonction de la présence d'un élément enfant spécifique.

Limites CSS actuelles :

À partir des spécifications CSS actuelles (CSS2 et CSS3), il il n'y a pas de capacité intégrée pour effectuer la sélection des parents. Cela signifie que vous ne pouvez pas sélectionner directement un élément s'il contient un élément enfant spécifique.

Efforts et propositions passés :

Les anciennes versions de spécifications CSS incluaient le concept de sélecteur sujets, ce qui aurait permis la sélection d'un élément parent en fonction de son enfant. Cependant, cette fonctionnalité a été supprimée et n'est pas présente dans les implémentations CSS actuelles.

Fonctionnalités émergentes :

Brouillons plus récents de spécifications CSS, telles que les sélecteurs niveau 4. Dans le brouillon de l'éditeur, introduisez le concept de pseudo-classe relationnelle ":has()". ":has()" fournit un moyen de sélectionner un élément en fonction de son contenu.

Sélection d'éléments avec des éléments enfants à l'aide de ":has()":

Pour sélectionnez l'élément parent qui contient un élément enfant spécifique en utilisant ":has()":

parent-element:has(child-element) {
  /* styling goes here */
}

Exemple :

Pour sélectionner tous les

div:has(span) {
  /* styling goes here */
}