Comment puis-je styliser les éléments parents en fonction de leur contenu enfant à l'aide de CSS ?

Cibler des éléments basés sur le contenu enfant avec CSS

Vous pourriez rencontrer le besoin d'appliquer des styles CSS uniques aux éléments parents en fonction des éléments enfants ils contiennent. Alors que les sélecteurs CSS traditionnels se concentrent sur le ciblage d'éléments spécifiques, il existe un moyen d'obtenir un style conditionnel à l'aide du sélecteur :has().

La syntaxe de :has() est la suivante :

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

Avec cette syntaxe, vous pouvez appliquer des styles aux éléments div qui contiennent des éléments enfants spécifiques. Par exemple, les règles ci-dessus ajouteraient une bordure rouge aux éléments div contenant un enfant de classe « a » et une bordure bleue aux éléments div contenant un enfant de classe « b ».

Exemple :

<style>
  div:has(div.a) {
    border: solid 3px red;
  }
  div:has(div.b) {
    border: solid 3px blue;
  }
</style>
<div>
  <div class="a"></div>
</div>

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

Ce code donnerait deux éléments div, un avec une bordure rouge et un avec une bordure bleue, correspondant aux éléments enfants qu'ils contain.

Remarque : Le sélecteur :has() est largement pris en charge dans les navigateurs modernes mais peut ne pas fonctionner dans les navigateurs plus anciens.

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!