Combinators

Combinators let you target elements based on their relationship to other elements in the HTML structure. There are four of them, and each one connects selectors in a different way.

Descendant Selector (space)

Targets an element that is a descendant (child, grandchild, etc.) of another element.

div p {
  color: blue;
}

This targets every p that is inside a div, no matter how deeply nested.

Child Selector (>)

Targets only direct children of an element.

div > p {
  font-weight: bold;
}

This targets p elements that are direct children of a div. Paragraphs nested further inside other elements will not be affected.

Adjacent Sibling Selector (+)

Targets an element that is immediately after another element (same parent level).

h2 + p {
  margin-top: 0;
  font-style: italic;
}

This targets the first p that comes right after an h2.

General Sibling Selector (~)

Targets all siblings that come after a specified element.

h2 ~ p {
  color: #666;
}

This targets every p that comes after an h2 (not just the first one).

Quick Reference