[CSS] The Selection Revolution of :where() and :is()

Exploring the :where() and :is() pseudo-class selectors in CSS, introducing their basic usage, and discussing applications such as style resetting, universal components, and conditional styling.

In all industries, equality has always been a core issue. Whether in social classes, workplaces, or daily life, we are striving to break old frameworks to pursue fairer and more indiscriminate treatment. This spirit of seeking balance and justice is also reflected in CSS.

In front-end development with CSS, the :where() pseudo-class selector is like a standard-bearer of the equality movement, leading a revolution in style selection. Let’s delve into this selector.

▍:where() and :is(): Technological Equality

:is() simplifies code by combining multiple selectors, while :where() revolutionarily reduces specificity to zero, ensuring equal application of styles regardless of their complexity.

Comparative Application Scenarios

• :is() is suitable for scenarios where specificity needs to be maintained: for example, when elements need different styles based on different contexts.
• :where() is suitable for resetting styles or universal components: especially during global style resets or normalization, it ensures that more specific style rules are not inadvertently overridden.

HTML

<div id="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box special">Box 3</div>
</div>

CSS

/* basic */
.box {
    color: blue;
}

/* use :is() */
#container :is(.special) {
    color: green;
}

/* use :where() */
#container :where(.special) {
    color: red;
}

• The .box selector sets the text of all .box elements to blue.
• The #container :is(.special) selector sets the text of elements with the .special class to green. Since this rule includes an ID selector ( #container ), it has higher specificity.
• The #container :where(.special) selector also matches elements with the .special class, but since :where() has zero specificity, even though it includes an ID selector, this rule’s specificity is still lower than the :is() rule.

Therefore, ultimately, the text of Box 3 with the .special class will be displayed in green (not red), because the specificity of the #container :is(.special) rule is higher. If the #container :is(.special) rule is removed, then Box 3 would turn red.

▍Practical Applications

The :where() selector in CSS is particularly useful in the following scenarios:

1. Style Resetting or Normalization: When you want to apply global style resets or normalization rules but do not want these rules to affect specificity calculations, :where() is an ideal choice. This can prevent reset styles from accidentally overriding more specific style rules.
2. Theming or Universal Component Styles: In designing reusable components or themes, :where() can be used to define some base styles without increasing specificity, making it easier for subsequent, more specific rules to override them.
3. Conditional Style Application: When you need to apply certain styles conditionally, but do not want these conditions to increase the specificity of the selector, you can use :where().。

Example

Suppose you are creating a web page theme and you want to set a base style for all titles in the articles, but you do not want these base styles to affect subsequent more specific style rules:

:where(article, section, aside) h1 {
    font-size: 20px;
    color: black;
}

Here, :where() is used to select all h1 tags within article, section, or aside elements and set their base styles. This way, if there are more specific h1 style rules later, they can easily override these base styles, as :where() does not increase the specificity score.

▍Conclusion

:where() and :is() are not just two selectors; they are significant milestones for front-end developers on their journey towards efficiency and flexibility. This technical equality and freedom provide endless possibilities for creating more dynamic and user-friendly web pages.

If this article has inspired you, I hope you’ll give a 👏 to encourage me. Want to know more about web design concepts? Please follow me! Looking forward to meeting you in the next article!