Sélecteur :has()

Le sélecteur :has() en CSS permet de sélectionner un élément en fonction de ses descendants directs.

Cela signifie que vous pouvez sélectionner un élément uniquement s’il contient un certain type d’élément descendant.

Exemple 1 :

Pour sélectionner une section uniquement si elle contient une liste non ordonnée (ul) comme descendant direct.

<section class="conteneur">
  <h1>Titre</h1>
  <p>Ceci est un paragraphe.</p>
  <ul>
    <li> élément de liste 1 </li>
    <li> élément de liste 2 </li>
  </ul>
</section>

.conteneur:has(ul) {
  background-color: crimson;
}

Exemple 2 :

Pour sélectionner un élément en fonction du contenu textuel de ses descendants directs.

<article class="article">
  <h2>Titre de mon article</h2>
  <p>Le contenu de l'article.</p>
</article>

.article:has(p:contains("article")) {
  border: 1px solid #ccc;
}