CSS Adjacent Sibling Selector (+): How It Works

The + character is the adjacent sibling combinator in CSS. It selects an element only when it appears immediately after another specified sibling. By the end, you will be able to use p + p to style consecutive paragraphs without affecting the first paragraph in a group.

The CSS + operator is called the adjacent sibling combinator.

This selector:

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

means:

Select every <p> element that is immediately preceded by another <p> element, provided both elements have the same parent.

The element to the right of + receives the styles. The element on the left acts as the condition that must come immediately before it.

For example:

<article>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
</article>

• The first paragraph has no preceding <p> sibling, so p + p does not match it.
• The second paragraph immediately follows a <p>, so it matches.
• The third paragraph immediately follows a <p>, so it also matches.

This matters because CSS often needs to style an element based on its nearby document structure. A common use is adding spacing between repeated items while keeping the first item free of extra spacing.

Think of + as a rule for the next item in a line:

“If a paragraph is directly next to another paragraph, style the second one.”

In p + p, the first p is the item you look for, and the second p is the item that gets styled.

It is like saying: “Give every person standing directly after another person a badge.” The first person does not get a badge merely for being first; later people receive one only if the person immediately before them matches the rule.

The general form is:

first-selector + second-selector {
  property: value;
}

second-selector is styled when it immediately follows first-selector under the same parent.

<section>
  <h2>Introduction</h2>
  <p>This paragraph follows the heading.</p>
  <p>This paragraph follows another paragraph.</p>
</section>

h2 + p {
  color: royalblue;
}

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

In this example:

• h2 + p selects the first paragraph because it immediately follows the <h2>.
• p + p selects the second paragraph because it immediately follows a <p>.

Compare that with a normal type selector:

p {
  margin-top: 1rem;
}

This selects every paragraph, including the first one. p + p is more specific about a paragraph's position relative to its previous sibling.

The elements must be adjacent. This does not match:

<div>
  <p>First paragraph.</p>
  <img src="divider.png" alt="Divider">
  <p>Second paragraph.</p>
</div>

p + p {
  color: red;
}

The second paragraph is not immediately after the first one: an <img> is between them.

Consider this HTML and CSS:

<div class="article">
  <p>Welcome.</p>
  <p>Here is more information.</p>
  <h3>Details</h3>
  <p>More details appear here.</p>
</div>

p + p {
  border-top: 1px solid #ccc;
  padding-top: 12px;
}

CSS evaluates each paragraph:

1. For <p>Welcome.</p>, its previous sibling does not exist. It does not match p + p.
2. For <p>Here is more information.</p>, the immediately previous sibling is a <p>. It matches and receives the border and padding.
3. For <p>More details appear here.</p>, the immediately previous sibling is an <h3>, not a <p>. It does not match.

Only the second paragraph is styled by this rule.

If the selector were instead:

h3 + p {
  color: green;
}

the last paragraph would match because it directly follows the <h3>.

The adjacent sibling combinator is useful when an element's appearance depends on what directly came before it.

• Paragraph spacing: Add vertical spacing only between paragraphs.

  .article p + p {
    margin-top: 1em;
  }
  

• Heading-to-content spacing: Style the first paragraph after a heading differently.

  h2 + p {
    font-size: 1.125rem;
  }
  

• Form feedback: Show an error message immediately after an invalid field.

  input:invalid + .error-message {
    display: block;
  }
  

• List separators: Add a left border or spacing between neighboring navigation links.

  .nav-link + .nav-link {
    border-left: 1px solid #ddd;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }
  

• Checked controls: Style a label that immediately follows a checked checkbox.

  input[type="checkbox"]:checked + label {
    text-decoration: line-through;
  }
  

In production CSS, + is commonly used to avoid special classes such as .first, .not-first, or .has-spacing.

Stack repeated components without styling the first one

.card + .card {
  margin-top: 16px;
}

This is a common component pattern. Each .card after another .card gets spacing, but the first card does not need a special override.

Scope the rule to a component

Avoid broad selectors when your page has many unrelated elements:

.article-content p + p {
  margin-top: 1rem;
}

Scoping to .article-content prevents the rule from unexpectedly changing paragraphs in modals, footers, or forms.

Pair controls with their labels

The following markup order enables a CSS-only interaction:

<input id="newsletter" type="checkbox">
<label for="newsletter">Subscribe to updates</label>

#newsletter:checked + label {
  font-weight: 700;
}

Because CSS selects following siblings, the input must appear before the label for this exact selector to work.

For more complex layouts, developers may prefer a parent class, a component state class, or :has() when browser support requirements allow it. The + combinator remains especially clear and lightweight when the elements are truly adjacent.

Expecting p + p to style the first paragraph

p + p {
  color: red;
}

This does not select the first <p>. It selects a <p> only when another <p> is immediately before it.

Use p when every paragraph should be styled:

p {
  color: red;
}

Forgetting that elements must be immediate siblings

This will not match p + p:

<div>
  <p>First</p>
  <span>Note</span>
  <p>Second</p>
</div>

The <span> breaks adjacency. Use the general sibling combinator if any later matching sibling is acceptable:

p ~ p {
  color: red;
}

Confusing a child with a sibling

This HTML does not make the second paragraph a sibling of the first:

<div>
  <p>First</p>
  <section>
    <p>Second</p>
  </section>
</div>

They have different parents, so p + p cannot connect them.

Thinking the selector styles the left side

h2 + p {
  color: blue;
}

This styles the <p>, not the <h2>. CSS selectors target the final, rightmost part.

Using + when the order is reversed

<label for="terms">Accept terms</label>
<input id="terms" type="checkbox">

input:checked + label {
  color: green;
}

This cannot match because the label comes before the input. + only selects a following sibling, never a previous one.

+ and ~ both work with siblings, but adjacency is the key difference:

<div>
  <p>One</p>
  <span>Interruption</span>
  <p>Two</p>
</div>

p + p { color: red; } /* Matches no paragraphs here */
p ~ p { color: blue; } /* Matches "Two" */

Use + when the elements must be directly next to each other. Use ~ when any later sibling is acceptable.

/* Select B only when B directly follows A */
A + B {
  property: value;
}

p + p { margin-top: 1rem; }
h2 + p { font-weight: 600; }
.item + .item { border-top: 1px solid #ddd; }
input:checked + label { color: green; }

• + is the adjacent sibling combinator.
• The selector on the right receives the styles.
• Both elements must share the same parent.
• The matching element must come immediately after the first element.
• An element in between prevents a match.
• + selects only forward, never a preceding sibling.
• Use ~ instead when matching any later sibling is acceptable.

What does p + p mean in CSS?

It selects each <p> element that immediately follows another <p> element with the same parent.

Does p + p select the first paragraph?

No. The first paragraph has no preceding paragraph sibling, so it cannot match this selector.

What is the difference between + and ~ in CSS?

+ requires the elements to be directly adjacent. ~ matches any later sibling that shares the same parent, even if other elements appear between them.

Does whitespace or a line break break the + selector?

No. Whitespace and line breaks in HTML do not create element siblings. Another HTML element, such as a <span> or <div>, does break adjacency.

Can I select the previous sibling with CSS +?

No. + selects the following sibling only. You can restructure the markup, add a state class, or consider :has() where appropriate.

Can I use + with classes, IDs, and pseudo-classes?

Yes. For example, .warning + .message, #menu-toggle:checked + label, and h2 + p are valid selectors.

Do both elements need the same parent?

Yes. Adjacent siblings are elements at the same nesting level under one parent element.

• CSS selectors — The broader syntax used to target HTML elements for styling.
• General sibling combinator (~) — Targets later siblings without requiring immediate adjacency.
• Child combinator (>) — Targets direct children rather than sibling elements.
• Descendant combinator (space) — Targets elements nested anywhere inside another element.
• Pseudo-classes — States such as :checked, :hover, and :invalid can be combined with +.
• CSS specificity — Determines which competing CSS rule wins.
• :has() pseudo-class — Can select a parent based on its contents or following structure in modern CSS.