CSS Combinators

Intermediate ~10 min read

What are Combinators?

Combinators define relationships between selectors. They let you target elements based on their position relative to other elements in the DOM tree.

Descendant Selector (Space)

The space combinator selects all descendants (children, grandchildren, etc.) of an element.

HTML

CSS

<div class='container'>
  <p>Direct child paragraph</p>
  <div>
    <p>Nested paragraph (grandchild)</p>
  </div>
  <p>Another direct child</p>
</div>
<p>Outside paragraph</p>

Child Selector (>)

The > combinator selects only direct children, not deeper descendants.

HTML

CSS

<div class='parent'>
  <p>Direct child (styled)</p>
  <div>
    <p>Grandchild (not styled)</p>
  </div>
  <p>Another direct child (styled)</p>
</div>

Adjacent Sibling Selector (+)

The + combinator selects the element immediately following another element (same parent).

HTML

CSS

<div class='content'>
  <h2>Heading</h2>
  <p>First paragraph (immediately after h2)</p>
  <p>Second paragraph</p>
  <h2>Another Heading</h2>
  <p>First paragraph after second h2</p>
</div>

General Sibling Selector (~)

The ~ combinator selects all siblings following an element (not just the immediate one).

HTML

CSS

<div class='wrapper'>
  <h3>Title</h3>
  <p>First sibling paragraph</p>
  <p>Second sibling paragraph</p>
  <div>A div sibling</div>
  <p>Third sibling paragraph</p>
</div>

Combining Multiple Combinators

Chain combinators together for precise targeting. Read from right to left!

HTML

CSS

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li>
      <a href='#'>Products</a>
      <ul>
        <li><a href='#'>Nested Item 1</a></li>
        <li><a href='#'>Nested Item 2</a></li>
      </ul>
    </li>
    <li><a href='#'>Contact</a></li>
  </ul>
</nav>

Practical Example: Form Layout

Use combinators to style form elements based on their relationships.

HTML

CSS

<form>
  <label>Name</label>
  <input type='text' />
  <label>Email</label>
  <input type='email' />
  <button>Submit</button>
</form>

Pro Tip: Use child selector > instead of descendant selector (space) when possible for better performance and more predictable styling!

Summary

A B (space) - Descendant: all B inside A
A > B - Child: direct children B of A
A + B - Adjacent sibling: B immediately after A
A ~ B - General sibling: all B siblings after A
Combinators can be chained for precise targeting
Read complex selectors from right to left

Quick Quiz

Which combinator selects only direct children?

Space

Previous Attribute Selectors

Next CSS Variables

What are Combinators?

Descendant Selector (Space)

Child Selector (>)

Adjacent Sibling Selector (+)

General Sibling Selector (~)

Combining Multiple Combinators

Practical Example: Form Layout

Summary

Quick Quiz

Enjoying these tutorials?