CSS Combinators

CSS combinators connect selectors to describe relationships between HTML elements. They make it possible to select elements based on where they appear in relation to other elements in the document.

The four commonly used combinators are the descendant combinator, child combinator, next-sibling combinator, and subsequent-sibling combinator.

Descendant Combinator

The descendant combinator is represented by a space between two selectors. It selects matching elements that are descendants of another element, regardless of how deeply they are nested.

article p {
  color: blue;
}

This selector matches every <p> element located anywhere inside an <article> element.

<article>
  <p>This paragraph is selected.</p>
  <section>
    <p>This paragraph is also selected.</p>
  </section>
</article>

Both paragraphs are descendants of the <article>, even though the second paragraph is nested inside a <section>.

Child Combinator

The child combinator is represented by a greater-than sign (>). It selects elements that are direct children of another element.

article > p {
  color: blue;
}

This selector matches a <p> element only when its direct parent is an <article> element.

<article>
  <p>This paragraph is selected.</p>
  <section>
    <p>This paragraph is not selected.</p>
  </section>
</article>

The first paragraph is a direct child of the <article>. The second paragraph is a descendant, but its direct parent is the <section>.

Next-Sibling Combinator

The next-sibling combinator is represented by a plus sign (+). It selects an element that immediately follows another element when both elements share the same parent.

h2 + p {
  font-weight: bold;
}

This selector matches a <p> element when it immediately follows an <h2> element.

<h2>CSS Selectors</h2>
<p>This paragraph is selected.</p>
<p>This paragraph is not selected.</p>

Only the first paragraph immediately follows the heading, so only that paragraph matches the selector.

Subsequent-Sibling Combinator

The subsequent-sibling combinator is represented by a tilde (~). It selects matching sibling elements that appear after another element and share the same parent.

h2 ~ p {
  color: #333333;
}

This selector matches each <p> sibling that appears after the <h2> element.

<h2>CSS Selectors</h2>
<p>This paragraph is selected.</p>
<div>Other content</div>
<p>This paragraph is also selected.</p>

Unlike the next-sibling combinator, the matching paragraphs do not need to immediately follow the heading.

Combining Combinators

Combinators can be used together to describe more specific relationships between elements.

article > section p {
  color: blue;
}

This selector first identifies a <section> that is a direct child of an <article>, then selects <p> elements that are descendants of that section.

Combined selectors can be useful, but selectors should remain as simple as practical so they are easy to understand and maintain.

CSS Combinators Example

The following example demonstrates the difference between the child, next-sibling, and subsequent-sibling combinators.

<style>
.example > p {
  color: blue;
}
h2 + p {
  font-weight: bold;
}
h2 ~ .note {
  background-color: #ffffcc;
}
</style>

<div class="example">
  <p>Direct child of the div.</p>
  <section>
    <p>Nested paragraph inside the section.</p>
  </section>
</div>

<h2>Sibling Selectors</h2>
<p>This paragraph immediately follows the heading.</p>
<p class="note">This note is a later sibling of the heading.</p>

Play in Editor

The child combinator styles only the paragraph that is a direct child of the div. The next-sibling combinator makes the paragraph immediately after the heading bold, while the subsequent-sibling combinator gives the later paragraph with the note class a background color.