CSS Sibling Selectors: How to Select Elements

CSS sibling selectors let you target elements that share the same parent, based on their position relative to each other. You use the adjacent sibling combinator (+) to select an element immediately after another, or the general sibling combinator (~) to select any later sibling. This article explains both selectors, how they work, and how to use them effectively.

What Are Sibling Selectors?

Sibling selectors are CSS combinators that match elements based on their relationship within the same parent. Unlike descendant or child selectors, which look at ancestry, sibling selectors look sideways—at elements that share the same parent node. There are two types: the adjacent sibling combinator (+) and the general sibling combinator (~). Both are part of the CSS Selectors Level 3 specification, supported in all modern browsers.

The Adjacent Sibling Combinator (+)

The + combinator selects an element that immediately follows a specified element, and both must share the same parent. It matches only the first element that comes right after, with no other elements in between.

Example:

h2 + p {
  color: blue;
}

This rule applies to a <p> that directly follows an <h2> inside the same parent. If there is any other element (like a <div> or another <p>) between them, the selector won’t match.

The General Sibling Combinator (~)

The ~ combinator selects all elements that follow a specified element, as long as they share the same parent. It does not require the elements to be adjacent; any later sibling will match.

Example:

h2 ~ p {
  color: green;
}

This rule applies to every <p> that appears after an <h2> within the same parent, regardless of what comes between them. However, it does not match <p> elements that appear before the <h2>.

How to Choose Between + and ~

Your choice depends on the structure you want to target:

Use + when you need to style the element that comes immediately after another, such as a paragraph right after a heading.
Use ~ when you want to style all subsequent siblings, like changing the appearance of all list items after a certain one.

For example, to highlight the first paragraph after each <h2>, use h2 + p. To change the color of all paragraphs after an introductory note, use .note ~ p.

Common Use Cases and Examples

Sibling selectors are handy for styling forms, navigation menus, and content layouts without adding extra classes or JavaScript. Here are a few practical examples:

Form labels: Style a label differently when its associated input is focused, using input:focus + label.
Navigation: Add margins between menu items with li + li { margin-left: 10px; }.
Content styling: Make the first paragraph after a heading stand out with h2 + p { font-weight: bold; }.
Checkbox toggles: Show or hide an element based on a checkbox state, like #toggle:checked ~ .content { display: block; }.

Common Mistakes and Pitfalls

One frequent mistake is assuming that sibling selectors can reach elements that are not in the same parent. Sibling selectors only work between elements that share the same parent node. If the target is nested inside another element, the selector won’t match.

Another pitfall is forgetting that + only matches the immediate next sibling. If you add an element in between, the rule stops working. Also, note that sibling selectors only look forward—they cannot select an element that comes before the reference element.

Finally, be aware of specificity. Sibling selectors have the same specificity as a simple class selector (0,0,1,0) when combined with a type selector. Overusing them can lead to specificity conflicts, so keep your selectors as simple as possible.

Browser Support and Performance

Both + and ~ are supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 7 and above. They are part of the CSS Selectors Level 3 standard, so you can use them without worry.

Performance-wise, sibling selectors are generally fast, but like any selector, they can become slower if you use them on very large documents with complex structures. In practice, the impact is negligible for most pages.

Frequently Asked Questions

Can I select a previous sibling?

No, CSS does not have a previous sibling selector. You can only select elements that come after the reference element. If you need to style a previous sibling, you may have to restructure your HTML or use JavaScript.

What is the difference between + and ~?

The + selects only the immediately following sibling, while ~ selects all following siblings. For example, h2 + p matches only the first <p> right after an <h2>, whereas h2 ~ p matches every <p> after that <h2>.

Do sibling selectors work with classes and IDs?

Yes, you can combine sibling selectors with any simple selector, such as classes, IDs, or attributes. For example, .active + li selects the list item immediately following an element with class active.

Can I chain multiple sibling selectors?

Yes, you can chain them. For instance, h2 + p + p selects the second paragraph after an <h2> (the one that follows the first paragraph). This works because the selector matches the element that is the immediate sibling of the previous match.

Are sibling selectors useful for responsive design?

Yes, they can be used to adjust layouts based on element order. For example, you might use input:checked ~ .menu to show a mobile menu when a checkbox is toggled, without needing JavaScript.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →