Inspect the working example
The lesson section contains one direct paragraph and another inside a nested section. The direct rule uses .lesson>p; the nested paragraph has its own purple rule.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Child selector | .lesson>p | Matches direct only |
| Descendant selector | .lesson p | Matches direct and nested |
| Actual colors | Read both computed colors | Green, purple |
Follow the browser mechanism
The child combinator requires an immediate parent-child relationship. A descendant selector can traverse more than one level. Neither selector changes the tree; it selects from the structure already present.
A broad descendant rule reaches both levels
The alternative applies one green descendant rule to both paragraphs.
<style>body{margin:8px}</style>
<style>.lesson p{color:rgb(0,80,40)}</style><section class="lesson"><p id="direct">Direct note</p><section><p id="nested">Nested note</p></section></section>Both paragraphs match and become green; the intended direct-only scope is lost.
Try the repair
If nested moves one level deeper, does .lesson>p begin matching it?
Show the worked answer
No. It still lacks the immediate parent relationship. The descendant selector continues to reach it.
- Record matched ID sets before comparing colors.
- Test the actual nesting rather than infer from indentation.