Puis-je styliser un élément parent en fonction de ses éléments enfants en CSS ?

Éléments de style basés sur des éléments enfants en CSS

Est-il possible d'appliquer des styles CSS à un élément en fonction des éléments enfants qu'il contient ?

Oui, CSS fournit un moyen d'y parvenir en utilisant la pseudo-classe :has(). Il vous permet de cibler des éléments selon qu'ils contiennent ou non un élément descendant spécifié.

Syntaxe :

div:has(child-selector) {
  /* CSS styles for elements containing the child */
}

Exemple :

Pour donner à un élément div une bordure rouge s'il contient un div enfant avec une classe de "a":

div:has(div.a) {
  border: solid 3px red;
}

Remarque : La pseudo-classe :has() est prise en charge dans les navigateurs modernes mais pas dans les navigateurs plus anciens comme Internet Explorer.

Utilisation alternative de JavaScript (jQuery) :

Si vous avez besoin d'une compatibilité avec des navigateurs plus anciens, vous pouvez utiliser JavaScript avec le sélecteur :has() de jQuery :

$('div:has(div.a)').css('border', '1px solid red');

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!