Inspect the working example
The scoped default is gray. The highlighted paragraph should be green. :where contributes zero specificity for its entire argument.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Default selector | :where(.lesson) p | Only p contributes specificity |
| Override | .highlight | Class specificity wins |
| Result | Inspect computed color | rgb(0,80,40) |
Follow the browser mechanism
:where can match a context without adding its argument’s specificity. That keeps this default easy to override. It does not stop matching descendants and does not establish a cascade layer.
The plain context adds a class and a type
The alternative uses .lesson p for the same gray default.
<style>body{margin:8px}</style>
<style>.lesson p{color:rgb(90,90,90)}.highlight{color:rgb(0,80,40)}</style><section class="lesson"><p class="highlight">Highlighted workshop note</p></section>The class-plus-type default outranks the class-only override and leaves the paragraph gray.
Try the repair
Does putting .highlight later always defeat a more specific .lesson p rule?
Show the worked answer
No. Source order only breaks the appropriate ties after earlier cascade criteria, including specificity, are equal.
- Compare exact matched selectors and computed colors.
- Keep scope matching separate from specificity.