Comment puis-je styliser les éléments parents en fonction de leurs éléments enfants à l'aide de CSS ?

Style des éléments parents en fonction des éléments enfants

Il est possible de définir des styles CSS pour un élément qui sont appliqués en fonction de la présence d'éléments enfants spécifiques. éléments. Ceci est réalisé en utilisant la pseudo-classe :has().

Exemple

Considérez le code HTML suivant :

<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

Pour styliser le div parent en fonction de ses enfants, utilisez la pseudo-classe :has() :

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

Le premier div aura une bordure rouge car il contient un div enfant avec classe "un". Le deuxième div aura une bordure bleue car il contient un div enfant de classe "b".

Remarque : Avant la pseudo-classe :has(), ce comportement ne pouvait être réalisé en utilisant JavaScript.

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!