:where()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

La fonction de pseudo-classe CSS :where() prend une liste de sélecteurs en argument et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.

Exemple interactif

:where() a toujours une spécificité de 0, tandis que :is() participe à la spécificité du sélecteur en prenant la spécificité de son argument le plus spécifique.

Analyse permissive de la liste des sélecteurs

:is() et :where() acceptent une liste permissive de sélecteurs (voir la spécification).

En général, lorsqu'on utilise une liste de sélecteurs, celle-ci devient intégralement invalide dès que l'un des sélecteurs est invalide. En utilisant :is() ou :where(), si la liste contient un sélecteur incorrect ou qui n'est pas pris en charge, celui-ci sera ignoré et les autres seront utilisés.

css
:where(:valid, :non-pris-en-charge) {
  /* … */
}

Le fragment qui précède sera interprété correctement et ciblera :valid, même pour les navigateurs qui ne prennent pas en charge :non-pris-en-charge, alors que :

css
:valid,
:non-pris-en-charge {
  /* … */
}

Sera ignoré pour les navigateurs qui ne prennent pas en charge :non-pris-en-charge, même s'ils prennent en charge :valid.

Exemples

Comparer :where() et :is()

Nous verrons avec cet exemple comment fonctionne :where() et la différence entre :where() et :is().

Prenons le fragment de code HTML qui suit :

html
<article>
  <h2>Liens mis en forme avec <code>:is()</code></h2>
  <section class="is-styling">
    <p>
      Voici le contenu principal. Ceci
      <a href="https://mozilla.org">contient un lien</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Voici un contenu en aparté, qui
      <a href="https://developer.mozilla.org">contient également un lien</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      Et voilà le pied de page, contenant aussi
      <a href="https://github.com/mdn">un lien</a>.
    </p>
  </footer>
</article>

<article>
  <h2>Liens mis en forme avec <code>:where()</code></h2>
  <section class="where-styling">
    <p>
      Voici le contenu principal. Ceci
      <a href="https://mozilla.org">contient un lien</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Voici un contenu en aparté, qui
      <a href="https://developer.mozilla.org">contient également un lien</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      Et voilà le pied de page, contenant aussi
      <a href="https://github.com/mdn">un lien</a>.
    </p>
  </footer>
</article>

Dans cet exemple, nous avons deux articles, contenant chacun une section, un aparté et un pied de page. Ils utilisent une classe différente pour les éléments enfants.

Pour cibler les liens à l'intérieur du contenu plus simplement, on pourrait utiliser :is() ou :where() comme suit :

css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

Toutefois, si nous devions surcharger la couleur des liens pour les pieds de page avec un sélecteur simple :

css
footer a {
  color: blue;
}

Cela ne fonctionnera pas pour les liens rouges, car les sélecteurs à l'intérieur de :is() participent à la spécificité générale du sélecteur et car les sélecteurs de classe ont une spécificité supérieure à celle des sélecteurs d'élément.

Cependant, les sélecteurs à l'intérieur de :where() ont une spécificité à 0, et le lien orange du pied de page sera surchargé par le sélecteur simple.

Note : Vous pouvez également consulter cet exemple sur GitHub.

Syntaxe

css
:where(<complex-selector-list>) {
  /* … */
}

Spécifications

Specification
Selectors Level 4
# zero-matches

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi