Les sélecteurs CSS :has, :not, :is et :where

En CSS, les sélecteurs sont des outils essentiels pour cibler des éléments sur une page web. Traditionnellement, cette tâche peut devenir complexe, surtout lorsque vous avez besoin de cibler plusieurs éléments ou de définir des conditions spécifiques. Les pseudo-classes fonctionnelles comme :has, :not, :is et :where simplifient considérablement ces tâches, vous permettant de cibler des éléments de manière plus précise et efficace.

:is()

Le sélecteur pseudo-classe :is() est l'équivalent d'un groupe de sélecteurs. Il permet d'appliquer les mêmes styles à plusieurs sélecteurs sans avoir à les répéter. Cela rend votre code plus concis et plus lisible.

Explication

Avec :is(), vous pouvez lister plusieurs sélecteurs à l'intérieur des parenthèses, séparés par des virgules. Le navigateur appliquera alors les styles définis si l'élément correspond à l'un des sélecteurs de la liste. C'est un peu comme un raccourci pour la logique OR (OU).

Exemple

Disons que vous souhaitez que tous les titres <h1>, <h2> et <h3> aient la même couleur. Au lieu de les lister séparément, vous pouvez utiliser :is() :

:is(h1, h2, h3) {
  color: #333;
}

:not()

Le sélecteur pseudo-classe :not() est un outil puissant qui vous permet d'exclure un élément d'une sélection. En d'autres termes, il cible les éléments qui ne correspondent pas au sélecteur spécifié entre les parenthèses.

Explication

Le sélecteur :not() inverse une sélection. Si vous voulez sélectionner tous les paragraphes sauf un, vous pouvez utiliser ce sélecteur. Il est très utile pour appliquer des styles à tout un groupe d'éléments, à part à quelques exceptions.

Exemple

Pour donner à tous les éléments de liste <li> une bordure, sauf le dernier :

li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

:where()

Le sélecteur pseudo-classe :where() est très similaire à :is(). Il permet de cibler plusieurs sélecteurs dans une seule déclaration. La principale différence réside dans la spécificité du sélecteur.

Explication

Le sélecteur :where() a toujours une spécificité de 0. Cela signifie que les styles qu'il applique peuvent être facilement écrasés par d'autres règles CSS, même celles avec une faible spécificité. C'est utile pour définir des styles de base qui peuvent être simplement modifiés.

Exemple

Vous voulez donner une marge de base à plusieurs éléments, mais vous savez que ces styles seront souvent écrasés. Utilisez :where() pour que d'autres sélecteurs, même simples, puissent prendre le dessus.

:where(header, main, footer) {
  margin: 1rem 0;
}

:has()

Le sélecteur pseudo-classe :has() est le plus récent et le plus puissant de cette liste. Il permet de cibler un élément qui contient un autre élément spécifique à l'intérieur de sa structure. C'est un peu comme un sélecteur "parent" qui n'existait pas auparavant en CSS.

Explication

Ce sélecteur vous permet de cibler un élément basé sur le contenu ou les descendants qu'il a. Par exemple, vous pouvez styliser une carte produit (<div class="card">) uniquement si elle contient un bouton "Acheter" (<button>).

Exemple

Imaginons que vous voulez donner une bordure rouge à un article de blog (<article>) qui contient une image (<img>).

article:has(img) {
  border: 2px solid red;
}

Conclusion

Ces sélecteurs modernes sont des ajouts très pratiques au langage CSS. Ils vous permettent de coder de manière plus efficace, de réduire la redondance et de créer des sélecteurs plus lisibles et faciles à maintenir. L'intégration de ces sélecteurs dans vos projets peut grandement améliorer la qualité et la propreté de votre code.