Comment puis-je styliser un élément parent en fonction de ses éléments enfants à l'aide de CSS ?

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

En tant que développeur Web, vous pouvez rencontrer des situations dans lesquelles vous devez appliquer des styles à un élément parent basé sur la présence d'éléments enfants spécifiques. Bien que cela puisse sembler une tâche simple, y parvenir uniquement avec CSS peut être un défi.

Heureusement, CSS fournit des sélecteurs qui peuvent vous aider à y parvenir :

has() Sélecteur :

Le sélecteur has() vous permet de sélectionner un élément qui contient un élément enfant spécifique. Par exemple, pour appliquer un style à un parent

élément s'il a un enfant

élément avec la classe « sub », vous pouvez utiliser le CSS suivant :

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

Exemple :

Considérez la structure HTML suivante :

<ul class="main">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul class="sub">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li>Sub Item 3</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

À l'aide du sélecteur has(), vous pouvez appliquer un fond bleu à tous les fichiers

• éléments sous le
  avec la classe "main" qui a l'enfant
  éléments avec la classe "sub":

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

  Remarque : Le sélecteur has() n'est pas pris en charge par tous les navigateurs. Si vous avez besoin d'une prise en charge plus large du navigateur, vous pouvez plutôt envisager d'utiliser une solution 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!