:where()
Works like :is(), but always has zero specificity. Ideal for base styles that should be easy to override.
Example
#:where(.btn) {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #3f3f46;
color: #fff;
}
.buy {
background: #10b981;
}<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Default</button>
<button class="btn buy" type="button">Buy the course</button>
</div>The first rule plays the role of a component-library style: thanks to :where() it has a weight of (0, 0, 0). The second one is your own plain class, which wins with no !important, regardless of rule order.
Definition and usage
#The :where() pseudo-class takes a list of selectors and matches an element that matches any one of them, exactly like :is(). There’s one difference, but it matters: whatever you put in the parentheses, :where() adds zero to the specificity.
That makes it suited to styles meant to yield easily: resets, default styles in component libraries, and themes. The rule :where(.card) p has the weight of a plain p, so anyone using the library can override it with an ordinary class, with no !important needed.
Only the part in the parentheses gets zeroed out. In the selector :where(.card) .title, the class .title still weighs (0, 1, 0). The list is forgiving too, just like in :is(): invalid selectors are skipped, and the rest still works.
Syntax
#:where( <selector list> )Example selectors
#(0, 0, 0)
The ID in the parentheses adds no weight, so the plainpwins. The background is green.(1, 0, 0)
For comparison,:is()keeps the ID’s weight and wins. The background is blue.(0, 1, 0)
Only the part in the parentheses is zeroed out. The class.noteweighs normally and beatsp. The background is blue.:where(#intro, :unknown-selector)
(0, 0, 0)
The unknown selector in the list is skipped, and the rest still works. The background is blue.
Example selectors in practice
#:where(#intro)
p wins. The background is green.:where(#intro) { background: royalblue; }
p { background: seagreen; }:is(#intro)
:is() keeps the ID’s weight and wins. The background is blue.:is(#intro) { background: royalblue; }
p { background: seagreen; }:where(#intro).note
.note weighs normally and beats p. The background is blue.:where(#intro).note { background: royalblue; }
p { background: seagreen; }:where(#intro, :unknown-selector)
:where(#intro, :unknown-selector) { background: royalblue; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write resets and default styles in
:where(). Any later rule, even a single type selector, will easily override them. - Don’t wrap styles that are meant to win, such as error states, in
:where(). The zero weight would make them lose to almost anything.
Related entries
#- :is()Matches an element against any selector in a list. Shortens long, repetitive selectors into a single notation.
- SpecificityA selector’s weight, which decides which rule wins when several rules set the same property on the same element.
- :not()Selects elements that match neither the given selector nor any selector in the list.
- :has()Selects an element based on what it contains or what follows it. Lets you style a parent according to its children.
- A, BA comma combines several selectors into a single rule, to give them the same styles without repeating declarations.
Spotted a mistake or missing an example? Write to us.