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

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

Linda Hamilton

Libérer： 2024-11-24 06:08:18

original

900 Les gens l'ont consulté

How Can I Style a Parent Element Based on its Child Elements Using 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

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

Copier après la connexion

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>

Copier après la connexion

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

éléments sous le