CSS Adjacent Sibling Selector (+)

What You’ll Learn

The element + element selector — also called the adjacent sibling combinator — targets an element only when it is the very next sibling after another element. It is perfect for precise spacing and typography tweaks.

Introduction

The element + element selector in CSS is used to select an element that is directly preceded by another specified element. Both elements must share the same parent and sit next to each other in the HTML.

This combinator is useful when you want to style one specific neighbor — for example, the first paragraph after a heading — without affecting other similar elements further down the page.

Definition and Usage

Write the first selector, a plus sign (+), then the second selector. The rule applies only when the second element is the immediate next sibling of the first. If any other element sits between them, the selector does not match.

📝 Syntax

The signature of the adjacent sibling selector is:

element1 + element2 {
  /* CSS properties */
}

Basic Example

h2 + p {
  color: #2563eb;
  font-weight: 600;
  margin-top: 0;
}

Syntax Rules

• Both elements must be siblings under the same parent.
• Only the first matching next sibling is selected.
• No other elements may appear between the two siblings.
• Spaces around + are conventional: h2 + p.
• Works with types, classes, IDs, and attribute selectors.

Related Selectors

• element ~ element — general sibling (all following siblings)
• element element — descendant combinator (nested inside)
• element > element — direct child combinator

When to Use element + element

The adjacent sibling selector shines when the relationship is “right after”:

• Intro paragraphs — Style the first paragraph after a heading differently from body text.
• Form fields — Add margin between a label and its input when they are siblings.
• Stacked components — Use .item + .item for gap between consecutive cards or list rows.
• Toolbar buttons — Add left margin to a button that follows another button.
• Figure captions — Target a caption element immediately after an image.

Examples Gallery

Practice the + combinator with headings, forms, cards, and sibling comparisons.

<style>
  h2 + p {
    color: #2563eb;
    font-weight: 600;
    margin-top: 0;
  }
</style>

<h2>Section Title</h2>
<p>This paragraph is adjacent to the heading.</p>
<p>This paragraph is not adjacent to the heading.</p>

label + input {
  display: block;
  margin-top: 0.35rem;
  margin-bottom: 1rem;
}

.card + .card {
  margin-top: 0.75rem;
}

/* Only the first p after h2 */
h2 + p { color: #2563eb; }

/* All p siblings after h2 */
h2 ~ p { color: #16a34a; }

⚠️ Common Pitfalls

• Elements in between — A comment, wrapper, or extra tag between siblings breaks the match. The second element must be directly next in the DOM.
• Only one sibling — + never selects multiple elements. Use ~ for that.
• Wrong parent — Siblings must share the same parent. Cousins or nested elements do not qualify.
• Markup structure — If your label wraps the input, label + input will not work; adjust HTML or use a different selector.

♿ Accessibility

• Keep semantic HTML — Combinators style structure; they do not replace proper heading levels or label associations.
• Do not hide content with + alone — If only the adjacent element is styled differently, ensure meaning is still clear to screen reader users.
• Focus order — When styling label + input, keep logical tab order and visible focus styles on inputs.
• Color contrast — Highlighted intro text must still meet contrast guidelines.

💡 Best Practices