La pseudo-classe :where CSS pour regrouper des sélecteurs

Vous avez déjà eu ce moment frustrant où votre CSS devient ingérable ? Des sélecteurs de plus en plus longs, des !important qui s’accumulent… La pseudo-classe :where en CSS a été conçue pour vous simplifier la vie. Elle permet de regrouper des sélecteurs sans ajouter de spécificité, ce qui aide à garder un code plus simple et plus facile à maintenir.

• Utiliser :where pour éviter les conflits de spécificité et garder un CSS propre et facile à faire évoluer.
• Structurer vos styles de manière plus stratégique afin de simplifier la maintenance de vos projets, même lorsqu’ils deviennent complexes.
• Gagner en clarté et en modernité dans votre écriture CSS grâce à des exemples concrets applicables à vos propres sites.

Dans ce tutoriel complet, vous allez découvrir ce qu’est réellement la pseudo-classe :where en CSS, pourquoi elle change la façon d’écrire du CSS moderne, et surtout comment l’utiliser concrètement dans vos projets front-end. Le tout expliqué simplement.

Comprendre le problème avant de parler de :where

Avant d’entrer dans le vif du sujet, il faut comprendre le problème que :where vient résoudre.

En CSS, chaque sélecteur possède une spécificité. Dit autrement : certains sélecteurs sont “plus forts” que d’autres.

👉 Tout savoir sur les Sélecteur et spécificité

Par exemple :

p {
  color: blue;
}

.article p {
  color: red;
}

Ici, le second sélecteur est plus spécifique. Donc les paragraphes dans .article seront rouges. Jusque-là, tout va bien.

Mais imaginez maintenant un projet plus complexe :

body .container .article p {
  color: green;
}

Plus vous ajoutez de niveaux, plus la spécificité augmente. Et un jour, pour modifier une simple couleur, vous vous retrouvez à écrire :

body .container .article p.special {
  color: purple !important;
}

Et là… vous sentez que quelque chose ne tourne pas rond.

• C’est précisément ici que la pseudo-classe :where en CSS entre en scène.

Qu’est-ce que la pseudo-classe :where en CSS ?

:where() est une pseudo-classe introduite avec les sélecteurs CSS de niveau 4. Elle permet de regrouper des sélecteurs sans ajouter de spécificité.

Oui, vous avez bien lu. Contrairement aux autres sélecteurs, :where a une spécificité égale à zéro. C’est sa force.

La syntaxe de base de :where

:where(sélecteur1, sélecteur2, sélecteur3) {
  propriété: valeur;
}

Exemple simple :

:where(h1, h2, h3) {
  font-family: Arial, sans-serif;
}

Ici, vous ciblez plusieurs titres en même temps, mais sans augmenter la spécificité.

La grande différence entre :where et les sélecteurs classiques

Prenons un exemple pour bien comprendre.

Sans :where

h1, h2, h3 {
  color: blue;
}

Ce code fonctionne. Mais chaque sélecteur garde sa spécificité normale.

Avec :where css

:where(h1, h2, h3) {
  color: blue;
}

Visuellement, cela semble identique.

Mais techniquement, la spécificité est différente :

• h1 → spécificité normale
• :where(h1) → spécificité 0

Et cette différence est capitale dans les projets complexes.

Pourquoi la spécificité zéro change tout

Imaginez que vous travaillez sur un thème ou un framework.

Vous définissez des styles globaux :

:where(h1, h2, h3) {
  color: black;
}

Plus tard, dans une section spécifique :

.article h2 {
  color: red;
}

Même si .article h2 semble plus spécifique, vous n’avez pas besoin d’écrire un sélecteur encore plus long. Pourquoi ? Parce que :where n’ajoute aucune spécificité.

• Vous gardez le contrôle.

C’est extrêmement utile pour :

• Les design systems
• Les frameworks CSS
• Les thèmes WordPress
• Les composants réutilisables

Bref, partout où la gestion de la priorité devient délicate.

Comparaison entre :is et :where

On confond souvent :where et :is.

C’est normal car les deux permettent de regrouper des sélecteurs :

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

Mais voici la différence essentielle :

• :is() garde la spécificité du sélecteur le plus fort
• :where() a toujours une spécificité de zéro

Prenons l’exemple suivant :

:is(.box, #main) {
  padding: 20px;
}

La spécificité sera celle de #main (très forte).

Alors que :

:where(.box, #main) {
  padding: 20px;
}

La spécificité reste 0. Même avec un ID dedans. Oui. Même avec un ID.

C’est presque contre-intuitif, et pourtant parfaitement logique.

Exemple concret : simplifier un reset CSS

Prenons un cas très pratique. Vous voulez normaliser les marges :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

h1, h2, h3, p, ul, ol {
  margin: 0;
}

Version moderne avec :where css :

:where(h1, h2, h3, p, ul, ol) {
  margin: 0;
}

Pourquoi c’est mieux ?

Parce que si plus tard vous faites :

.article p {
  margin: 1rem 0;
}

Cela fonctionnera sans difficulté.

• Vous évitez les conflits.

👉 Pour aller plus loin : Normalize.css VS Reset.css

Utiliser :where pour cibler des structures complexes

Regardons un exemple plus avancé.

HTML :

<div class="card">
  <h2>Titre</h2>
  <p>Description</p>
</div>

CSS classique :

.card h2,
.card p {
  margin-bottom: 10px;
}

Avec :where :

.card :where(h2, p) {
  margin-bottom: 10px;
}

Ce code est plus lisible.

• Et surtout, la spécificité reste faible. Cela facilite les surcharges ultérieures.

Utiliser :where pour créer un CSS plus maintenable

C’est ici que :where devient réellement intéressant.

Imaginez un projet à long terme, un site qui évolue et des collaborateurs qui ajoutent du CSS… Si la spécificité grimpe trop vite, vous entrez dans ce qu’on appelle :

La guerre des sélecteurs.

Avec :where, vous adoptez une philosophie plus propre.

Vous écrivez des styles globaux faibles. Puis vous spécialisez uniquement quand nécessaire. C’est une manière plus stratégique d’écrire du CSS.

Cas pratique : styliser un menu

HTML :

<nav class="menu">
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

CSS moderne :

.menu :where(ul) {
  list-style: none;
  padding: 0;
}

.menu :where(a) {
  text-decoration: none;
  color: black;
}

Plus tard :

.menu a:hover {
  color: red;
}

• Aucune lutte de spécificité.

Tout reste fluide.

Compatibilité navigateur

Bonne nouvelle, :where en CSS est largement supporté par les navigateurs modernes.

Chrome, Firefox, Edge, Safari le prennent en charge.

Si vous développez pour des environnements récents, vous pouvez l’utiliser sans crainte.

Quand faut-il utiliser :where ?

Utilisez :where lorsque :

• Vous voulez regrouper des sélecteurs
• Vous souhaitez éviter d’augmenter la spécificité
• Vous écrivez un CSS global ou un reset
• Vous développez un design system

En revanche, si vous avez besoin d’une spécificité calculée, préférez :is().

Les erreurs à éviter avec :where

1. Croire que :where augmente la priorité. Ce n’est pas le cas.
2. L’utiliser partout sans stratégie. Il ne s’agit pas d’un gadget, mais d’un outil.
3. Penser qu’il remplace toutes les autres pseudo-classes. Il complète votre boîte à outils.

Petit défi pour vous entraîner

Essayez de transformer ce code :

.container h1,
.container h2,
.container h3 {
  color: navy;
}

En version :where CSS.

Solution :

.container :where(h1, h2, h3) {
  color: navy;
}

Simple. Élégant. Moderne.

---

La pseudo-classe :where en CSS n’est pas juste une nouveauté technique. C’est un véritable outil stratégique pour écrire un CSS plus propre, plus souple et plus maintenable.

En l’utilisant intelligemment, vous évitez la guerre des spécificités, vous gardez le contrôle sur vos styles, et vous facilitez l’évolution de vos projets. Ce n’est pas spectaculaire au premier regard, mais dans un projet réel, la différence est immense.

Alors la prochaine fois que vous écrirez un sélecteur long comme le bras, posez-vous cette question : Est-ce que :where ne pourrait pas simplifier tout ça ?

Il y a de fortes chances que la réponse soit oui.