Introducing :where()
The CSS pseudo-class function :where() selects elements by taking a list of selectors as its argument. If an element can be selected by any of the selectors in the list, it will be selected by :where().
Note: :where()
Problem 1
In CSS, when multiple elements need to have the same style, we often write a long list of selectors and separated them by commas, for example:
header h1, header h2, header h3,
article h1, article h2, article h3,
footer h1, footer h2, footer h3 {
color: red;
}
Solution 1
In this case, instead of writing a long list of selectors, we can use the CSS :where() function to simplify the code. This way, we can apply the same style rules to multiple elements in a more organized manner:
:where(header, article, footer) :where(h1, h2, h3) {
color: red;
}
Problem 2
In this example, there are two sets of CSS rules, one for a:not(:hover) in general, and another for article a. The first set of rules for a:not(:hover) declare more specifically and has resulting a higher specificity, it overrides the rules for article a, the result is that the color set in article a is not applied.
<head>
<style>
a:not(:hover){
color: royalblue;
}
article a{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<a href="https://uipencil.com/">This is a link</a><br/>
<a href="https://uipencil.com/">This is a link</a><br/>
<br/>
<article>
<a href="https://uipencil.com/">This is a link 2</a> <br/>
<a href="https://uipencil.com/">This is a link 2</a> <br/>
<a href="https://uipencil.com/">This is a link 2</a> <br/>
</article>
</body>
Result:
Traditionally, resolving the issue involves either increasing the specificity of the article a rule, changing it to article a:not(:hover), or adding !important to overwrite the code, but both of these options are not ideal best practices as they can make the code more complex.
Solution 2
By replacing the code from a:not(:hover) to a:where(:not(:hover)). The presence of :where() resetting its specificity to 0, and it works perfectly now!
<head>
<style>
a:where(:not(:hover)) {
color:royalblue;
}
article a{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<a href="https://uipencil.com/">This is a link</a><br/>
<a href="https://uipencil.com/">This is a link</a><br/>
<br/>
<article>
<a href="https://uipencil.com/">This is a link 2</a> <br/>
<a href="https://uipencil.com/">This is a link 2</a> <br/>
<a href="https://uipencil.com/">This is a link 2</a> <br/>
</article>
</body>
Browser Compatibility
:where() is supported in most of the modern browser:
| Desktop | Mobile |
|---|---|
 Chrome 88 Edge 88 Safari 14 Firefox 82 Opera 74 | Chrome Android 88 WebView Android 88 iOS Safari 14 Firefox Android 79 Opera Android 63 Samsung Internet 15 |
source: https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility
Similar function :is()
In addition to using :where() to simplify the code, we can also use :is() to achieve a similar result in ‘Problem 1’, but not for ‘Problem 2’.
:is(header, article, footer) :is(h1, h2, h3) {
color: red;
}
important note:
The difference between :where() and :is() lies in their specificity. The specificity of :where() is always set to zero, whereas the specificity of :is() depends on the specificity of the most specific selector in its arguments.
ui pencil 
Leave a comment