:where()Baseline · Widely available
The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 21, 2021. Widely available since Jul 21, 2023.
Browser support
DesktopChrome
1–87Not supported
88+Supportedsince Jan 19, 2021
Current: 155Edge
12–87Not supported
88+Supportedsince Jan 21, 2021
Current: 154Firefox
1–81Not supported
82+Supportedsince Oct 20, 2020
Current: 157Safari
1–13.1Not supported
14+Supportedsince Sep 16, 2020
Current: 27MobileChrome Android
18–87Not supported
88+Supportedsince Jan 19, 2021
Current: 155Firefox Android
4–81Not supported
82+Supportedsince Oct 20, 2020
Current: 157Safari iOS
1–13.4Not supported
14+Supportedsince Sep 16, 2020
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
CSS
/* Zero specificity — easy for users of your library to override */
:where(.btn) {
padding: 8px 16px;
border-radius: 6px;
}Feature detection
CSS · check before using
@supports selector(:where(*)) {
/* styles that use :where(*) */
}
/* or in JavaScript */
if (CSS.supports("selector(:where(*))")) {
// use it
}Documentation (MDN)
Specification
Sub-features
Support for each part of the feature (2). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| where | 88 | 88 | 78 | 14 | 88 | 79 | 14 |
| where.forgiving_selector_list | 88 | 88 | 82 | 14 | 88 | 82 | 14 |