Comment puis-je styliser un élément parent en fonction de l'existence d'un élément enfant spécifique en CSS ?

Appliquer le style au parent s'il a un enfant avec CSS

En CSS, styliser l'élément parent en fonction de l'existence de ses éléments enfants peut être obtenu en utilisant le sélecteur has().

Pour appliquer des styles au parent lorsqu'il contient un enfant avec la classe "sub", utilisez le CSS suivant règle :

ul li:has(ul.sub) {
  /* Parent styles */
}

Par exemple, si vous avez le HTML suivant :

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

Et le CSS suivant :

ul li:has(ul.sub) {
  background-color: lightblue;
}

La sortie affichera "Parent 3 avec Enfant" en bleu clair, indiquant que le parent (li) a un enfant avec la classe "sub".

Notez que le sélecteur $ mentionné dans le la réponse proposée à la question n'est pas encore standardisée en CSS4. Au lieu de cela, le sélecteur has() est le moyen pris en charge pour obtenir cette fonctionnalité.

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!