Sibling combinators (+ and ~)

Learn + adjacent sibling and ~ general sibling combinators.

Adjacent sibling combinator: +

The + sign is the adjacent sibling combinator. It targets the element that shares the same parent and comes right after the element on the left.

Write h2 + p and you select the paragraph that comes immediately after an h2. If another tag sits between them, the match fails. This is ideal for styling the first paragraph after a heading.

General sibling combinator: ~

The ~ sign is the general sibling combinator. It targets all elements that share the same parent and come after the element on the left; other siblings may sit between them.

Write h2 ~ p and every paragraph that follows an h2 is selected. This is handy for giving the same style to all paragraphs after a heading.

What is the difference?

Both sibling combinators look at the same parent; the difference is distance. + picks only the element immediately after. ~ picks all siblings that come later.

In a menu, li + li is often used to add a separator before each list item except the first. This tiny pattern solves list separators in one line.

Exercise Reset the paragraph after a heading

Write an h2 + p selector and add margin-top: 0 inside. The paragraph right after each heading will start with no top spacing.

Show example solution

/* fix the paragraph after a heading */
h2 + p {
  margin-top: 0;
}

Test yourself

What does h2 + p target?
```
h2 + p {
  margin-top: 0;
}
```
- All paragraphs after the h2
- The paragraph that is a direct child of h2
- The single paragraph right after the h2
- All siblings of the h2
Show answer

The single paragraph right after the h2 — Correct. The + combinator matches only the paragraph right after the h2.

Select the paragraph right after the h2

____ {
  margin-top: 0;
}

Show answer

h2 + p {
  margin-top: 0;
}

Match each combinator to its meaning

h2 + p

Paragraph right after the heading
h2 ~ p

All paragraphs after the heading
nav > a

Direct link inside the menu
article p

All paragraphs in the article

Next lesson: Attribute selector patterns

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies