Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Combinator Selectors  ›  Lesson

The Next-Sibling Combinator

Next Sibling 12 minThe plus combinator matches the single element immediately after another element that shares its parent.

The Next-Sibling Combinator

In each dish card, the price comes straight after the dish name. The owner wants a little space between the name and whatever follows it. You do not have to label the element that follows; you can describe it by where it sits.

The rule

+ means "the very next sibling": same parent, immediately after.

A + B matches a B that comes immediately after an A, with the same parent. Only one element can be "the next" after any A.

<main>
  <section id="menu">
    <h2>Today's menu</h2>
    <article class="dish">
      <h3>Masala omelette</h3>
      <p class="price">₹180</p>
      <p>Three eggs, green chilli and coriander.</p>
    </article>
    <article class="dish special">
      <h3>Mango lassi</h3>
      <p class="price">₹120</p>
      <p>Thick, cold and only in summer.</p>
    </article>
  </section>
  <section id="visit">
    <h2>Visit us</h2>
    <p>Open 8 am to 6 pm, every day.</p>
  </section>
</main>
h3 + p {
  margin-top: 0.25rem;
}

In each card the order is h3, p.price, p. The element straight after each h3 is the price paragraph, so h3 + p matches the two prices, not the descriptions.

More readings on this page:

  • h2 + article matches the omelette's card, the first thing after "Today's menu". The lassi card comes after another article, not after the h2.
  • article + article matches the lassi's card.
  • h2 + p matches only the opening hours. In the menu section, the h2 is followed by an article, not a p.
  • .price + p matches the two descriptions.

Siblings share a parent. The h2 in #menu and the paragraphs inside the cards are not siblings, because the paragraphs have a different parent.

Like all combinators, + adds nothing to specificity: h3 + p is (0,0,2).

The shortcut

Find each left-side element, then take exactly one step forward to its next sibling. If that one element matches the right side, it is selected. Never look two steps ahead or step backwards.

Which paragraphs does `h2 + p` match?Step 1 of 4

  1. Find the left side

    There are two h2 elements: one in #menu, one in #visit.

Drills

Answer fast — trust the rule.

quick drill

Which elements does h3 + p match?

quick drill

Which element does h2 + article match?

quick drill

How many elements does article + article match?

quick drill

Does .price + h3 match anything on the café page?

Remember

  • + selects the one element immediately after, with the same parent.
  • One step forward, never two, never backwards.
  • Siblings must share a parent; children of a neighbour do not count.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainOne step forward

Explain why h2 + p matches the opening-hours paragraph but not any paragraph in the menu section.