: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

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.

The post :where() – CSS: Cascading Style Sheets appeared first on Hongkiat.