Sélecteurs CSS modernes : :where(), :is() et :has()

CSS continue d’évoluer et introduit de puissants nouveaux sélecteurs qui enrichissent les possibilités de mise en forme.

Trois nouveaux sélecteurs sont :is(), :where() et :has().

Le sélecteur :is() #

Il permet de simplifier les sélecteurs complexes en regroupant plusieurs éléments.

Exemple :

nav > ul a:hover,
footer > ol a:hover,
aside > p a:hover {
  color: purple;
}

/** Peut devenir **/
:is(nav > ul, footer > ol, aside > p) a:hover {
  color: purple;
}

Le sélecteur :where() #

Le sélecteur :where() fonctionne comme :is(), sans augmenter la spécificité. Il est donc utile pour définir des styles sans modifier la priorité des styles existants.

Cela peut vous aider à résoudre des problèmes pour lesquels votre seul recours aurait été d’utiliser un sélecteur encore plus spécifique ou d’ajouter !important à une règle CSS.

Bien qu’utile pour les problèmes de spécificité, la pseudo-classe :where() peut aussi avoir un impact important dans les bibliothèques CSS.

À retenir :

• Utilisez :is() lorsque vous souhaitez conserver la spécificité.
• Utilisez :where() lorsque vous voulez appliquer des styles sans augmenter la spécificité, afin qu’il soit plus facile de les remplacer par d’autres règles CSS.

Le sélecteur :has() #

Le sélecteur :has(), souvent appelé « sélecteur parent », permet de mettre en forme des éléments en fonction de la présence d’éléments enfants spécifiques. C’était auparavant impossible avec le CSS seul.

Exemple :

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

Cela applique une bordure rouge à chaque élément article qui contient une image.

Conclusion #

Ces nouveaux sélecteurs :where(), :is() et :has() apportent plus de puissance et de flexibilité au CSS. :where() réduit la spécificité, :is() simplifie les sélecteurs complexes et :has() permet de mettre en forme un parent selon ses enfants.