Combinators

Combinators

Combinators describe the RELATIONSHIP between elements: ancestor, child, or sibling.

Descendant selector (space)

Any element inside another, at ANY depth:

div p {
  color: red;
}

Every <p> inside a <div> (even nested deeply) goes red.

Child selector (>)

Only DIRECT children:

div > p {
  color: red;
}

Only <p> that are IMMEDIATELY inside <div>, not grandkids.

Adjacent sibling (+)

The element that comes RIGHT AFTER another, sharing the same parent:

h2 + p {
  color: blue;
}

Only the first <p> that follows an <h2> gets blue.

General sibling (~)

Any sibling AFTER the first, sharing the parent:

h2 ~ p {
  color: green;
}

All <p> after the <h2> are green.

The combos

TL;DR

• space = any descendant.
• > = direct child.
• + = adjacent sibling.
• ~ = any later sibling.
• Combine them for surgical precision.