Low-Specificity CSS Reset with :where()
Low-specificity resets without complicated selectors
Resets used verbose low-specificity tricks, or you fought them later with higher specificity. :where() has zero specificity so it never wins over your component styles.
ul, ol { margin: 0; padding-left: 1.5rem;}/* Specificity (0,0,2). Component .list { padding: 0 } loses. */:where(ul, ol) { margin: 0; padding-inline-start: 1.5rem;}/* Specificity 0. .list { padding: 0 } wins. */where Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Safe to use without fallbacks.
Zero specificity
:where() strips specificity from its argument. Your reset never overrides component styles.
No !important
No need to bump specificity or use !important in components to beat the reset.
Same syntax as :is()
Drop in :where() where you would use :is(). Same selector list, zero specificity.
How it works
The old approach was either very specific selectors for resets (so they applied) or low-specificity hacks that were still hard to override. Tag selectors like ul, ol have specificity (0,0,2). A single class on a list like .list has (0,1,0), so it wins, but if your reset used a class or multiple elements, you often had to add more specificity or !important in components.
:where(ul, ol) accepts the same selector list as :is(), but the whole thing gets zero specificity. So your reset applies by order in the cascade, but any single class or ID in a component beats it. Use :where() for resets, base styles, and defaults you want to be easy to override.