T
css selectors has-selector is-selector web-development

La puissance des sélecteurs CSS modernes : :has, :is et :where

Maîtrisez la nouvelle génération de sélecteurs CSS. Découvrez comment :has() fonctionne comme un sélecteur de parent, et comment :is() et :where() simplifient vos feuilles de style.

2026-04-18

La puissance des sélecteurs CSS modernes : :has, :is et :where

Pendant des années, les développeurs CSS ont rêvé d'un "sélecteur de parent" — un moyen de styliser un élément en fonction de ses enfants. Nous avons également lutté contre des listes de sélecteurs longues et répétitives qui alourdissaient nos fichiers CSS.

Le CSS moderne a enfin exaucé ces vœux. Avec l'arrivée de :has(), :is() et :where(), la façon dont nous écrivons les sélecteurs a fondamentalement changé.

1. :has() : Le "sélecteur de parent" qui change la donne

La pseudo-classe :has() est sans doute l'ajout le plus puissant au CSS depuis une décennie. Elle vous permet de sélectionner un élément s'il contient un enfant spécifique ou s'il est suivi d'un frère spécifique.

Cas d'utilisation "Parent"

/* Stylise la carte UNIQUEMENT si elle contient une image */
.card:has(img) {
  display: flex;
  flex-direction: column;
}

/* Stylise la carte UNIQUEMENT si elle a un badge "en vedette" */
.card:has(.featured-badge) {
  border: 2px solid gold;
}

Cas d'utilisation "Conditionnel"

Vous pouvez même l'utiliser pour styliser des labels en fonction de l'état de leurs entrées :

/* Stylise le label si la case à cocher à l'intérieur est cochée */
.form-group:has(input:checked) label {
  color: green;
  font-weight: bold;
}

2. :is() : Simplifier les sélecteurs complexes

Avez-vous déjà écrit un code comme celui-ci ?

header h1, header h2, header h3, footer h1, footer h2, footer h3 {
  color: blue;
}

La pseudo-classe :is() vous permet de regrouper des sélecteurs et de réduire la répétition :

:is(header, footer) :is(h1, h2, h3) {
  color: blue;
}

Caractéristique clé : La tolérance

Contrairement aux listes de sélecteurs traditionnelles, :is() est tolérant (forgiving). Si un sélecteur de la liste est invalide, le navigateur ignorera celui qui est invalide et appliquera toujours les styles aux sélecteurs valides.

3. :where() : La puissance de la spécificité zéro

Le sélecteur :where() fonctionne exactement comme :is(), mais avec une différence cruciale : sa spécificité est nulle.

Pourquoi la spécificité est importante

En CSS, c'est le sélecteur le plus spécifique qui gagne. Cela conduit souvent à des "guerres de spécificité" où les développeurs utilisent !important ou de longues chaînes de sélecteurs pour écraser des styles.

/* Ceci a un impact nul sur la spécificité */
:where(.content) p {
  color: gray;
}

/* Un simple sélecteur de classe l'emportera désormais facilement */
.special-p {
  color: red; /* Gagne car :where() n'a ajouté aucun "poids" */
}

:where() est parfait pour les CSS Resets et les auteurs de bibliothèques qui souhaitent fournir des styles par défaut faciles à écraser par les utilisateurs.

4. :nth-child avancé avec of S

Vous connaissez probablement :nth-child(even), mais saviez-vous que vous pouvez désormais filtrer la sélection à l'aide du mot-clé of ?

/* Sélectionne le 2ème élément, mais UNIQUEMENT parmi ceux ayant la classe .visible */
li:nth-child(2 of .visible) {
  background: yellow;
}

C'est incroyablement utile pour les listes dynamiques où certains éléments peuvent être masqués via display: none.

5. Calculateur de spécificité : comprendre les mathématiques

La spécificité CSS est calculée à l'aide de trois colonnes : (A, B, C).

  • A : IDs
  • B : Classes, attributs et pseudo-classes
  • C : Éléments et pseudo-éléments

Comment les nouveaux sélecteurs affectent cela :

  • :is() et :has() : Leur spécificité est égale à celle du sélecteur le plus spécifique de leur liste d'arguments.
  • :where() : A toujours une spécificité de (0, 0, 0).

FAQ : Questions fréquemment posées

Q : Est-ce que :has() est supporté par tous les navigateurs ?

R : Oui ! Depuis fin 2023, :has() est supporté par les dernières versions de Chrome, Safari, Firefox et Edge. Il peut être utilisé en toute sécurité dans les projets web modernes.

Q : Quand dois-je utiliser :is() par rapport à :where() ?

R : Utilisez :is() lorsque vous voulez que les sélecteurs groupés conservent leur spécificité normale. Utilisez :where() lorsque vous voulez rendre les styles très faciles à écraser (courant dans les styles de base ou les resets).

Q : Est-ce que :has() impacte les performances ?

R : Les navigateurs ont optimisé :has() de manière significative. Bien que son utilisation des centaines de fois sur une seule page puisse avoir un petit impact, pour la plupart des modèles d'UI, il est extrêmement rapide et efficace.

Écrire un CSS plus propre et plus déclaratif

En maîtrisant ces sélecteurs, vous pouvez réduire considérablement le nombre de classes "utilitaires" dans votre HTML et garder votre logique là où elle doit être : dans votre CSS.

Vous voulez voir le poids de vos sélecteurs ? Essayez notre Calculateur de spécificité de sélecteur CSS (prochainement) pour maîtriser les mathématiques du CSS.

Retour au blog