This example shows how :where()
works, and also illustrates the difference between :where()
and :is()
.
Take the following HTML:
<article>
<h2>:is()-styled links</h2>
<section class="is-styling">
<p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.</p>
</section>
<aside class="is-styling">
<p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.</p>
</aside>
<footer class="is-styling">
<p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.</p>
</footer>
</article>
<article>
<h2>:where()-styled links</h2>
<section class="where-styling">
<p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.</p>
</section>
<aside class="where-styling">
<p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.</p>
</aside>
<footer class="where-styling">
<p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.</p>
</footer>
</article>
In this somewhat-contrived example, we have two articles that each contain a section, an aside, and a footer. They differ by the classes used to mark the child elements.
To make selecting the links inside them simpler, but still distinct, we could use :is()
or :where()
, in the following manner:
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;
}
However, what if we later want to override the color of links in the footers using a simple selector?
footer a {
color: blue;
}
This won't work for the red links, because the selectors inside :is()
count towards the specificity of the overall selector, and class selectors have a higher specificity than element selectors.
However, selectors inside :where()
have specificity 0, so the orange footer link will be overridden by our simple selector.
Note: You can also find this example on GitHub; see is-where.