CSS :is() vs :where() Selector: Key Differences and Usage

The CSS :is() selector matches any element that fits one of the selectors inside it and contributes to specificity, while :where() does the same but always has zero specificity. Use :where() to avoid increasing specificity and :is() when you want normal specificity.

Quick Comparison

Here is a quick side-by-side comparison of :is() and :where() selectors in CSS.

Feature	:is() Selector	:where() Selector
Purpose	Matches any selector inside and applies normal specificity	Matches any selector inside but has zero specificity
Specificity	Takes the highest specificity of its arguments	Always zero specificity regardless of arguments
Use Case	When you want to group selectors without losing specificity	When you want to group selectors without increasing specificity
Browser Support	Supported in all modern browsers	Supported in all modern browsers
Example	:is(h1, h2, h3) { color: red; }	:where(h1, h2, h3) { color: red; }

Key Differences

The main difference between :is() and :where() lies in how they affect CSS specificity. :is() takes the specificity of the most specific selector inside it. This means if you use :is() with selectors that have IDs or classes, the overall rule will have that higher specificity.

On the other hand, :where() always has zero specificity no matter what selectors you put inside it. This is useful when you want to apply styles broadly without overriding more specific rules elsewhere.

Both selectors simplify writing complex selectors by grouping multiple selectors inside parentheses, but choosing between them depends on whether you want to affect specificity or not.

Code Comparison

Using :is() to style multiple headings with normal specificity:

css

h1, h2, h3 {
  color: blue;
}

:is(h1, h2, h3) {
  font-weight: bold;
}

Output

All h1, h2, and h3 elements appear blue and bold in the browser.

:where() Equivalent

Using :where() to style the same headings but with zero specificity:

css

:where(h1, h2, h3) {
  color: blue;
  font-weight: bold;
}

Output

All h1, h2, and h3 elements appear blue and bold, but this style won't override more specific selectors.

When to Use Which

Choose :is() when you want to group selectors and keep or increase specificity, such as when overriding other styles is needed.

Choose :where() when you want to group selectors but keep specificity zero, so your styles don't unintentionally override more specific rules.

In short, use :where() for safe, low-specificity grouping and :is() when specificity matters.

Key Takeaways

:is() affects specificity; :where() does not.

Use :where() to avoid increasing specificity in grouped selectors.

:is() is best when you want to override other styles with grouped selectors.

Both selectors simplify writing complex CSS selectors.

Supported in all modern browsers, so use them confidently.