:where()
The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 88 | 88 | 78 | 14 | 88 | 14 | |
forgiving selector list Support for forgiving selector list | 88 | 88 | 82 | 14 | 88 | 14 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Default style with specificity 0 */
:where(ul, ol) {
list-style: none;
padding: 0;
margin: 0;
}
/* Easily overridable by the user */
.my-list {
list-style: disc;
padding-left: 1.5rem;
}Live demo
Use cases
-
Using :where()
The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.