What Is the CSS Adjacent Sibling Combinator?

The CSS adjacent sibling combinator (+) is a selector tool used to target an element that directly follows another specified element within the same parent container. This article explains how the adjacent sibling selector works, its syntax, how it differs from the general sibling combinator, and common real-world use cases in modern web layout design.

How the Adjacent Sibling Combinator Works

In CSS, combinators define the relationship between two selectors. The adjacent sibling combinator uses the plus sign (+) placed between two selectors:

selectorA + selectorB {
  /* styles applied to selectorB */
}

For the rule to apply, two strict conditions must be met:

1. Shared Parent: Both elements must share the exact same immediate parent element in the Document Object Model (DOM).
2. Immediate Precedence: selectorB must appear directly after selectorA in the HTML document flow, with no other HTML elements in between.

If any other element—such as a div, span, or image—is inserted between selectorA and selectorB, the selector will not match, and the style rule will not apply. Text nodes or whitespace alone do not break this adjacency.

Adjacent Sibling (+) vs. General Sibling (~)

It is common to confuse the adjacent sibling combinator with the general sibling combinator (~). While both require elements to share a parent and appear later in the DOM tree, their proximity rules differ:

• Adjacent Sibling (A + B): Matches only the single B element that appears immediately following A.
• General Sibling (A ~ B): Matches every B element that follows A, regardless of whether other elements sit between them.

Common Practical Use Cases

Managing Content Spacing (Lobotomized Owl and Flow Spacing)

One of the most effective uses of the + combinator is managing vertical flow between typographic elements. Instead of resetting margins on the first element, developers can apply a top margin only to elements that immediately follow another element:

h2 + p {
  margin-top: 0.5rem;
}

p + p {
  margin-top: 1.25rem;
}

This pattern ensures that the very first paragraph under a heading or container does not receive redundant top spacing, avoiding unnecessary layout gaps.

Custom Form Controls

The adjacent sibling combinator is widely used in pure CSS styling for custom checkboxes and radio buttons. By placing a standard input immediately before its corresponding <label>, you can style the label conditionally based on the input state:

input[type="checkbox"]:checked + label {
  color: #0d6efd;
  font-weight: bold;
}

Contextual UI Styling

The combinator is useful for applying styles only when specific components appear back-to-back, such as button groups or alert banners:

.btn + .btn {
  margin-left: 0.75rem;
}

Browser Support and Performance

The adjacent sibling combinator is part of the CSS Selectors Level 2 specification and is fully supported across all modern web browsers. It performs efficiently because browser rendering engines evaluate sibling relationships linearly in the DOM.