OnlineCBT
Instructions
First paragraph
Nested paragraph
Last paragraph
Target relationships in the document tree
Combinators connect selectors according to ancestry or sibling position. They describe HTML relationships, not visual proximity on the screen. Start with a small tree and mark which nodes should match before writing a complicated selector.
.article p { color: #334155; }
.article > p { border-left: 3px solid #2563eb; }
h2 + p { font-weight: 600; }
h2 ~ p { margin-top: 1rem; }A space matches descendants at any depth. The greater-than symbol matches only direct children. The plus sign matches the next element sibling. The tilde matches later element siblings sharing the same parent.
Test tree
All three paragraphs match .article p. Only First and Last match .article > p. First matches h2+p. First and Last match h2~p; the nested paragraph does not, because it has a different parent.
Common selector mistakes
Adding a wrapper can break a child selector while leaving a descendant selector working. That is not a browser bug: the required relationship changed. Whitespace text nodes do not stop an adjacent-element sibling match, but an intervening element does. None of these sibling combinators selects a preceding sibling.
Keep coupling intentional
A long chain such as .page main section div ul li a binds styling to many wrapper details. A component class on the target can be more robust. Use a relationship selector when the relationship itself matters, such as adding spacing between adjacent form fields.
Exercises
- Insert a small element between the heading and First. The adjacent selector should stop matching First, while the general-sibling selector still matches it.
- Wrap Last in a div. Explain which rules change.
- Style only direct list items in .menu without affecting a nested submenu.
