: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.
: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 :
: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 :
<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 :
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 :
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
:where(<complex-selector-list>) {
/* … */
}
Spécifications
Specification |
---|
Selectors Level 4 # zero-matches |
Compatibilité des navigateurs
BCD tables only load in the browser