Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Combinator Selectors  ›  Lesson

The Child Combinator

child 12 minThe greater-than combinator matches an element only when its parent matches the left-hand selector, not any further ancestor.

The Child Combinator

The menu section's own heading should have a line under it, but the dish headings inside the cards should not. "Inside the menu" is too loose for that. You need "directly inside": a child, not a grandchild.

The rule

> means "directly inside": one level down, no further.

A > B matches a B whose parent is an A. Grandchildren and deeper descendants do not count.

<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>
#menu > h2 {
  border-bottom: 2px solid navy;
}

#menu > h2 matches "Today's menu", because its parent is section#menu. Compare:

  • #menu > h3 matches nothing. The dish names are grandchildren of #menu; their parent is an article.
  • #menu h3, with a space, matches both dish names.
  • main > section matches both sections.
  • .dish > p matches the four paragraphs in the cards, whose parent is the article.

Spaces around > are optional: #menu>h2 means the same thing, though the spaced form is easier to read.

The child combinator adds nothing to specificity. #menu > h2 scores (1,0,1), exactly like #menu h2.

The shortcut

Look only at the parent. For each candidate, go up exactly one level. If that parent matches the left side, it is a match; if not, stop. Do not keep climbing.

Does `header > a` match the nav links?Step 1 of 4
  1. Candidates

    The page has two a elements, both in the header area.

That last step is the classic mistake: the links look like they are in the header, and they are, but they are its grandchildren.

Drills

Answer fast — trust the rule.

quick drill

How many elements does #menu > h3 match?

quick drill

How many elements does main > section match?

quick drill

Which selector matches the dish names but not the section headings?

quick drill

How does the specificity of #menu > h2 compare with #menu h2?

Remember

  • > means the parent must match; deeper ancestors do not count.
  • Go up exactly one level, then stop.
  • Combinators add nothing to specificity.

Practice — level up

0/1 solved

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

ExplainChild or descendant?

A teammate writes header > a { color: white; } and the nav links stay unchanged. Explain why and give two different fixes.