Descendant, Child, and Sibling Selectors

Combinators select elements based on their relationship to other elements in the HTML tree.

A B matches B anywhere inside A; A > B matches only direct children. A + B selects a following immediately adjacent sibling, and A ~ B selects matching later siblings sharing the same parent.

These selectors help you style a component based on its document structure without assigning a new class to every child.

Notice that a nested note is a descendant but not a direct child of the card.

HTML

<div class="panel"><p>Direct paragraph</p><section><p>Nested paragraph</p></section></div>

CSS

.panel p { color: #0f766e; }
.panel > p { background: #ccfbf1; padding: 8px; }

Rendered output

Observe: Both paragraphs are teal, but only the direct child gets the tinted background.

Select elements based on what immediately precedes them.

HTML

<div class="news"><h3>Update</h3><p>First paragraph.</p><p>Second paragraph.</p><p>Third paragraph.</p></div>

CSS

.news h3 + p { font-weight: 700; color: #1d4ed8; }
.news h3 ~ p { border-bottom: 1px solid #cbd5e1; padding: 7px; }

Rendered output

Observe: Every later paragraph gets a divider, but only the first paragraph is bold and blue.

Combinators operate on HTML relationships, not on pixel positions. A “child” is a direct nested element; a “sibling” has the same parent.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A space and > are not interchangeable.
• Sibling selectors do not match elements that appear before the reference element.

Wrap the first paragraph in a <div> and predict whether h3 + p still matches it.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Know the HTML relationship first; then choose the matching combinator.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.