CSS Combinators

Imagine drawing a family tree. You have grandparents, parents, children, and siblings. If you want to leave inheritance rules, you could say: 'Every child gets a house' (descendants), 'Only my direct children get a car' (child), or 'My younger sibling gets my watch' (adjacent sibling). CSS combinators are those family tree relationships. They let you target elements based on how they are nested and situated relative to other elements on your page.

In this page:

The Descendant Selector (Space)
The Child Selector (>)
The Adjacent Sibling Selector (+)
The General Sibling Selector ()
Combining Multiple Selectors

The Descendant Selector (Space)

The descendant selector targets every matching element nested anywhere inside a specified parent container, regardless of how deeply they are nested (children, grandchildren, great-grandchildren, etc.). It is defined by a simple space between selectors.

Note: Use descendant selectors to apply general styles to all links or text blocks inside a specific card container.

Warning: Because descendant selectors target every nested match, they can easily overwrite styles on elements nested deeply in sub-sections.

Example: The Descendant Selector (Space)

css

<style>
.card p {
  color: gray;
}
</style>
<div class="card">
  <p>Nested paragraph</p>
  <div><p>Deeply nested paragraph</p></div>
</div>

The Child Selector (>)

The child selector (defined by the > symbol) targets only direct children of a specified parent container, ignoring any elements nested more deeply (like grandchildren or great-grandchildren).

Note: Use the child selector to style the top-level list items of a dropdown menu without affecting sub-menus.

Warning: If you add container wrappers (like a div) around your child elements later, the child selector will stop targeting them.

Example: The Child Selector (>)

css

<style>
.menu > li {
  color: blue;
}
</style>
<ul class="menu">
  <li>Top-level item</li>
  <li><ul><li>Nested item</li></ul></li>
</ul>

The Adjacent Sibling Selector (+)

The adjacent sibling selector (defined by the + symbol) targets the very next sibling element located directly after a specified element on the same layout level.

Note: Use adjacent sibling selectors to style paragraphs that immediately follow heading tags.

Warning: If you insert an unrelated element (like an image) between your target siblings later, the adjacent sibling selector will fail to match.

Example: The Adjacent Sibling Selector (+)

css

<style>
h2 + p {
  font-weight: bold;
}
</style>
<h2>Heading</h2>
<p>Immediately after heading</p>
<p>Not affected</p>

The General Sibling Selector ()

The general sibling selector (defined by the ~ symbol) targets all matching sibling elements situated anywhere after a specified element on the same layout level, regardless of intervening elements.

Note: Use general sibling selectors to style lists of checkboxes or custom inputs that sit below a specific header.

Warning: This selector only targets sibling elements located after the specified element; it cannot target preceding siblings.

Example: The General Sibling Selector ()

css

<style>
h2 ~ p {
  color: green;
}
</style>
<h2>Heading</h2>
<p>Affected sibling</p>
<p>Also affected sibling</p>

Combining Multiple Selectors

You can combine multiple different combinators in a single selector rule to build complex target paths that target elements with extreme precision.

Note: Keep your compound selector paths as short as possible to prevent stylesheet bloat and make debugging easier.

Warning: Overly long, specific selector chains are fragile and can easily break if you change your HTML structure slightly later.

Example: Combining Multiple Selectors

css

<style>
.card > h2 + p {
  color: purple;
}
</style>
<div class="card">
  <h2>Title</h2>
  <p>Styled paragraph</p>
</div>

Common Mistakes

Using descendant selectors (space) when you only want to target direct children, causing accidental styling leaks.
Forgetting that adjacent sibling selectors (+) only match the single element located immediately next to the trigger.
Designing excessively long, fragile compound selector chains that break easily when you update your HTML structure.

Chapter Summary

Combinators select target elements based on their relationships in the HTML family tree structure.
The space selector targets all descendants, while the > selector targets only direct children of a specified parent.
The + selector targets the single adjacent sibling located immediately next to the trigger, while the ~ selector targets all sibling elements situated anywhere after it.

Browser Support

Standard CSS combinators (+, >, ) are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Resize Next Lesson → CSS Pseudo-classes