:where()
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.
Overview
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.
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 |
Syntax
/* 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 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.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features