:where() – CSS: Cascading Style Sheets
Managing CSS can be tricky, especially when styles need to override each other. This often makes it hard to keep the styles in the right places. To simplify things, the :where
selector was added in CSS. This is a special CSS selector that allows you to group selectors without increasing their specificity, making it easier to override styles when needed.
Consider the following HTML:
1st paragraph
2nd paragraph
3rd paragraph
4th paragraph
5th paragraph
We have two div
elements. One is inside #root
, and the other is outside of it. We want paragraphs inside #root
to be red and paragraphs inside .section
to be green. Typically, you can write CSS as follows:
#root p { color: red; } .section p { color: green; }
However, with this CSS, the paragraph inside .section
will be green, but the paragraphs inside #root
will remain red instead of turning green. This happens because the specificity of the #root
selector is higher than that of the .section
selector.
See the Pen CSS :where selector by HONGKIAT (@hkdc) on CodePen.
To solve this situation, traditionally, we could update our CSS as follows:
#root p { color: red; } .section p, #root .section p { color: green; }
But this is not ideal because it increases the specificity of the selector and makes them look more complex. It will eventually cause more problems when we need to override the styles.
This is where the :where
selector comes in. With the :where
selector, you can group selectors without increasing their specificity. Here’s how we can update our CSS instead:
:where(#root) p { color: red; } .section p { color: green; }
The #root
selector is wrapped with the :where
selector, which will reduce its specificity to 0
. This will allow the paragraph inside .section
to be all green, even though it is inside #root
.
See the Pen CSS :where selector (before) by HONGKIAT (@hkdc) on CodePen.
How is it different from the :is
selector?
The :where
selector is similar to the :is
selector, where we can group a number of selectors together. The main difference is their behavior affecting the specificity within the group. While the :where
selector will remove it (or set it to 0
), the :is
selector may increase the specificity of the selector with the highest specificity within the group.
Let’s take a look at the following example:
.section p { color: green; } .section .highlight { color: orange; } p:first-of-type { color: red; }
The result would be that only the first and third paragraphs would turn red. The second paragraph would remain orange since .section .highlight
has higher specificity than the p:first-of-type
, even though it is also the first paragraph.
See the Pen CSS :where vs :is selector by HONGKIAT (@hkdc) on CodePen.
Traditionally, we can always rewrite our CSS, as follows:
p:first-of-type, .section p:first-of-type { color: red; }
Alternatively, we can also write it this way:
p:first-of-type, p.highlight:first-of-type { color: red; }
However, this again results in more complex selectors and complicated specificity issues down the road. With the :is
selector, we can have it much simpler to solve this issue with the following rules.
:is(div, section, .section) p:first-of-type { color: red; }
We group together div
, section
, and .section
. This group will have the same specificity as .section
so the color red will apply to both within the div
and the section
elements as well.
See the Pen CSS :where vs :is selector (applied) by HONGKIAT (@hkdc) on CodePen.
Browser Compatibility
Browser | Desktop Version | Desktop Support | Mobile Version | Mobile Support |
---|---|---|---|---|
Google Chrome | 88 and later | Supported | 88 and later | Supported |
Mozilla Firefox | 78 and later | Supported | 78 and later | Supported |
Safari | 14.1 and later | Supported | 14.5 and later (iOS) | Supported |
Microsoft Edge | 88 and later | Supported | 88 and later | Supported |
Opera | 75 and later | Supported | 61 and later | Supported |
Internet Explorer | Not supported | Not supported | Not supported | Not supported |
Samsung Internet | N/A | N/A | 14.0 and later | Supported |
Wrapping up
The :where
selector is a great addition to CSS that allows you to group selectors without increasing their specificity. This makes it a perfect selector to add base styles to a group of elements without worrying about the specificity of the selector. It overall makes it easier to manage styles without complicating specificity and override them when needed.
Bonus: Check out Specificity Calculator to see how the specificity of your CSS selectors is calculated.