A combinator relates selector matches in the element tree. A space matches descendants; a greater-than sign matches direct children; a plus sign matches the next sibling.
Make this comfortable
CSS combinators: select relationships without encoding every wrapper
How the rule works
A review panel contains a direct status row and several nested notes. Styling only its immediate status row avoids coloring a status inside an embedded audit note. The adjacent-sibling rule gives a heading's following paragraph a tighter top margin. Neither selector creates the relationship; the HTML structure does. Use a stable class for the component root and keep relational depth short. If the DOM changes because a wrapper is added, a direct-child rule may stop matching. That may be correct, or it may reveal an overly fragile contract.
.review-panel > .status-row { border-block-start: 2px solid #175b44; }
.review-panel h2 + p { margin-block-start: .35rem; }
.review-panel .audit-note p { max-inline-size: 68ch; }Cost and verification
Simple selectors are rarely a bottleneck on their own. Deep chains raise maintenance cost because markup edits can silently change matching. Verify the selector against a nested audit note and a panel with multiple paragraphs. The second rule matches only the paragraph immediately after a heading, not every paragraph in the panel. If the design depends on a semantic state such as invalid input, prefer a state selector over inferring state from wrapper position.
Common Mistakes
- Do not confuse direct children with all descendants.
- Do not make a selector mirror every wrapper in the current template.
- Do not use structural position as a substitute for an explicit state.
Connected lessons
css
selectors
web