CSS Subsequent-Sibling Combinator

The CSS subsequent-sibling combinator selects sibling elements that follow another element and share the same parent. It is represented by the tilde (~) between two selectors and can match one or more later siblings.

Syntax

The subsequent-sibling combinator uses the tilde (~) between two selectors:

previous ~ sibling {
  property: value;
}

For example, the following selector matches every <p> sibling that occurs after an <h2> and shares the same parent:

h2 ~ p {
  color: #0088cc;
}

How the Subsequent-Sibling Combinator Works

The selector on the right must match a sibling that occurs after an element matched by the selector on the left. The matching elements must share the same parent, but they do not need to be immediately next to each other.

h2 ~ p {
  color: #0088cc;
}

This selector can match multiple <p> elements that follow an <h2>, even when other sibling elements occur between the heading and those paragraphs.

Sibling Relationships

Sibling elements share the same parent. The subsequent-sibling combinator only looks forward in the document and does not select matching siblings that occur before the first element.

<section>
  <p>Paragraph before the heading.</p>
  <h2>Heading</h2>
  <p>First paragraph after the heading.</p>
  <div>Other content.</div>
  <p>Second paragraph after the heading.</p>
</section>

The selector h2 ~ p matches both paragraphs after the <h2>. The paragraph before the heading does not match, and the intervening <div> does not prevent the later paragraph from matching.

Subsequent-Sibling vs. Next-Sibling Combinator

The subsequent-sibling and next-sibling combinators both select siblings that occur after another element, but the next-sibling combinator requires an immediate sibling relationship.

Selector	Matches
`h2 ~ p`	Every matching `<p>` sibling that occurs after an `<h2>` and shares the same parent.
`h2 + p`	A `<p>` only when it is the next sibling immediately following an `<h2>`.

Use the subsequent-sibling combinator when one or more later siblings should match. Use the next-sibling combinator when only the immediately following sibling should match.

Combining with Other Selectors

The subsequent-sibling combinator can connect type, class, ID, attribute, pseudo-class, and other selectors.

.title ~ .note {
  color: #0088cc;
}
#notice ~ p {
  font-weight: 600;
}
input:checked ~ label {
  color: #0088cc;
}

It can also be combined with other combinators to describe more detailed relationships within the document structure.

article > h2 ~ p {
  color: #0088cc;
}

This selector matches <p> siblings that follow an <h2> when that <h2> is a direct child of an <article>.

Specificity

The subsequent-sibling combinator itself does not add any specificity. The specificity of the complete selector is determined by the selectors on either side of the combinator.

Selector	Specificity
`h2 ~ p`	`0-0-2`
`.title ~ p`	`0-1-1`
`.title ~ .note`	`0-2-0`
`#notice ~ p`	`1-0-1`

Subsequent-Sibling Combinator Example

The following example uses h2 ~ p to select every paragraph sibling that follows the <h2>. A paragraph before the heading is not selected, while both paragraphs after the heading are selected even though another element appears between them.

h2 ~ p {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other combinators select elements according to different relationships within the document structure:

Specifications

The subsequent-sibling combinator is defined in the Selectors Level 4 specification.

CSS Subsequent-Sibling Combinator