The :where() pseudo-class is a modern CSS selector function used to group selectors without increasing CSS specificity.
It helps developers write cleaner and more maintainable CSS while keeping specificity very low.
This is especially useful in:
- Large projects
- CSS frameworks
- Reusable components
- Design systems
- Utility-first workflows
Why :where() is Important
Normally, complex selectors increase CSS specificity.
High specificity makes styles harder to override.
:where() solves this problem by always having:
[code theme="dark"]
0 specificity
[/code]
This makes overriding styles much easier.
Basic Syntax
[code theme="dark"]
:where(selector){
styles
}
[/code]
Simple Example
[code theme="dark"]
:where(h1,h2,h3){
color:blue;
}
[/code]
This styles all headings while keeping specificity extremely low.
Traditional Selector vs :where()
|
Selector
|
Specificity
|
|
.card h2
|
Higher specificity
|
|
:where(.card h2)
|
0 specificity
|
Example with Navigation
[code theme="dark"]
:where(nav a){
text-decoration:none;
color:black;
}
[/code]
Developers can easily override these styles later without using:
[code theme="dark"]
!important
[/code]
[grid]
Modern CSS Selector Example
Reusable Component Styling
CSS Specificity Demo
Low Specificity Architecture
[/grid]
Grouping Selectors
[code theme="dark"]
:where(header,main,footer){
padding:20px;
}
[/code]
This applies styles to multiple selectors cleanly.
Combining with Other Selectors
[code theme="dark"]
.card :where(h2,p,a){
margin-bottom:10px;
}
[/code]
Useful for component styling systems.
:where() vs :is()
|
Feature
|
:where()
|
:is()
|
|
Specificity
|
Always 0
|
Uses highest selector specificity
|
|
Best For
|
Easy overrides
|
Cleaner selector grouping
|
Advantages of :where()
- Zero specificity
- Easy style overrides
- Cleaner CSS architecture
- Better maintainability
- Perfect for frameworks and design systems
- Reduces specificity conflicts
Disadvantages of :where()
- New concept for beginners
- Requires understanding CSS specificity
- Older browsers may not support it
Best Use Cases
- Component libraries
- Tailwind custom layers
- Reusable UI systems
- Large CSS projects
- Low-specificity architecture
Cross Browser Compatibility
- Chrome → Supported
- Edge → Supported
- Firefox → Supported
- Safari → Supported
- Mobile Browsers → Good Support
Modern browsers support :where() very well.
It is becoming an important feature in modern CSS architecture and scalable design systems.
Browser Support Summary
[code theme="dark"]
:where(.card h2){
color:blue;
}
[/code]
is considered a powerful modern CSS selector feature for reducing specificity and creating maintainable stylesheets.