Sibling Selectors

CSS Sibling Selectors

CSS sibling selectors select elements according to their relationship with another element that shares the same parent. CSS provides an adjacent sibling combinator (+) for the next matching sibling and a subsequent-sibling combinator (~) for matching later siblings.

What Are Sibling Elements?

Sibling elements are elements that have the same parent. They appear at the same level of the HTML document structure rather than being nested inside one another.

<section>
  <h2>Gardening Tips</h2>
  <p>Choose plants suited to your climate.</p>
  <p>Water plants when the soil begins to dry.</p>
</section>

The <h2> and both <p> elements are siblings because each is a direct child of the same <section> element.

Adjacent Sibling Selector

The adjacent sibling combinator is written with a plus sign (+). It selects an element that immediately follows another matching element when both elements share the same parent.

h2 + p {
  color: blue;
}

The selector h2 + p selects a <p> element that immediately follows an <h2> sibling.

Adjacent Sibling Example

The adjacent sibling selector matches only the next sibling when that sibling matches the selector on the right.

h2 + p {
  color: blue;
}

<h2>Plant Care</h2>
<p>This paragraph immediately follows the heading.</p>
<p>This is another paragraph.</p>

Only the first paragraph matches h2 + p. Although the second paragraph is also a sibling of the heading, it does not immediately follow the <h2>.

Subsequent-Sibling Selector

The subsequent-sibling combinator is written with a tilde (~). It selects matching siblings that appear after another element and share the same parent. The matching elements do not have to immediately follow the first element.

h2 ~ p {
  color: green;
}

The selector h2 ~ p selects matching <p> siblings that occur after an <h2> with the same parent.

Subsequent-Sibling Example

Unlike the adjacent sibling selector, the subsequent-sibling selector can match more than one later sibling.

h2 ~ p {
  color: green;
}

<h2>Plant Care</h2>
<p>First paragraph after the heading.</p>
<div>Additional information</div>
<p>Second paragraph after the heading.</p>

Both paragraphs match h2 ~ p. The <div> between them does not prevent the second paragraph from matching because the paragraphs and heading are all siblings with the same parent.

Comparing Sibling Selectors

The + and ~ combinators both select siblings that appear after another element, but they differ in how many later siblings can match.

/* Immediately following sibling */
h2 + p {
  color: blue;
}

/* Matching later siblings */
h2 ~ p {
  font-weight: bold;
}

Use + when the immediate next sibling relationship matters. Use ~ when matching siblings may appear farther along after the first element.

Sibling Elements Must Share a Parent

Elements must have the same parent to match a sibling selector. An element nested inside another sibling is not itself a sibling of the elements outside that container.

<section>
  <h2>Plant Care</h2>
  <div>
    <p>This paragraph is inside the div.</p>
  </div>
  <p>This paragraph is a sibling of the heading.</p>
</section>

h2 ~ p {
  color: blue;
}

The final paragraph can match because it shares the <section> parent with the heading. The paragraph inside the <div> cannot match because its parent is the <div>.

Sibling Selectors Work Forward

The + and ~ sibling combinators select matching siblings that appear after the element identified by the selector on the left. They do not select earlier siblings.

h2 + p {
  color: blue;
}

<p>Paragraph before the heading.</p>
<h2>Page Heading</h2>
<p>Paragraph after the heading.</p>

The paragraph after the heading can match h2 + p. The paragraph before the heading cannot match because it appears before the <h2>.

When to Use Sibling Selectors

Sibling selectors are useful when styling depends on the position of one element relative to another element with the same parent. They can often provide contextual styling without adding another class to the HTML.

h2 + p {
  margin-top: 0;
}

.notice + .notice {
  margin-top: 10px;
}

h2 ~ p {
  line-height: 1.6;
}

Use the adjacent sibling selector when only the immediately following matching sibling should be selected. Use the subsequent-sibling selector when matching later siblings should also be selected.

Summary

CSS sibling selectors target elements that share the same parent. The adjacent sibling combinator (+) selects a matching element immediately following another element, while the subsequent-sibling combinator (~) selects matching siblings that appear later.

Sibling selectors work forward through elements at the same level of the HTML structure. The next tutorial covers attribute selectors, which select elements according to the presence or value of their HTML attributes.