Inspect the working example
The lesson root defines --ink green. The alternate subtree overrides --ink purple. All three paragraphs use color:var(--ink).
| Case | Input or inspection | Result and meaning |
|---|---|---|
| First paragraph | Resolve inherited --ink | Green from lesson |
| Nested paragraph | Resolve nearest --ink | Purple from alternate |
| Last sibling | Resolve its ancestor path | Green; alternate is not its ancestor |
Follow the browser mechanism
Unregistered custom properties inherit by default. Each element resolves the property on its own ancestor path, so a local override does not change siblings outside that subtree. The name is a CSS token, not a saved application setting.
Changing the ancestor affects all non-overridden descendants
The alternative puts purple on the lesson root and removes the local override.
<style>body{margin:8px}</style>
<style>.lesson{--ink:rgb(80,0,100)}p{color:var(--ink)}</style><section class="lesson"><p>Default note</p><section><p>Alternate note</p></section><p>Default again</p></section>All three paragraphs become purple. That does not achieve an isolated local color change.
Try the repair
Can the last paragraph inherit from an earlier sibling’s alternate subtree?
Show the worked answer
No. Inheritance follows its ancestors, not earlier siblings. It receives the lesson root’s green token.
- Record the three computed colors and token ancestor paths.
- Do not equate CSS inheritance with saved business-setting inheritance.