The Descendant Combinator
The café wants paragraphs inside the menu slightly smaller than the rest of the site, without adding a class to each one. The menu already has a name, #menu. A single space in a selector lets you say "paragraphs, but only those inside the menu".
The rule
A space means "anywhere inside", at any depth.
A combinator joins two selectors and describes how the elements are related. The descendant combinator is plain whitespace: A B matches every B that has an A somewhere above it, as a parent, grandparent or further up.
Here is the middle of the café page again:
<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 p {
font-size: 0.95rem;
}#menu p matches the four paragraphs in the two dish cards. They are grandchildren of #menu, not children, and that does not matter: "inside" means at any depth. The opening-hours paragraph is inside #visit, not #menu, so it is left alone.
Some useful readings:
main p: every paragraph in the main content, five of them..dish h3: the dish names.footer p: the footer line only.
The browser reads a selector from right to left: it finds each p, then climbs its ancestors looking for #menu. That is also how you should check one by hand.
Specificity simply adds up: #menu p is (1,0,1), .dish h3 is (0,1,1).
The shortcut
Start at the rightmost selector, then climb. For each candidate, walk up through its parents; if you meet the left-hand selector on the way to the top, it matches.
Start on the right
The opening-hours text is a
p, so it is a candidate.
The trap: a long descendant chain like body main section article p looks precise but is fragile. If someone wraps the cards in a div, it still matches, but if the section becomes an aside, it silently stops. Keep chains short.
Drills
Answer fast — trust the rule.
How many elements does main p match on the café page?
Which elements does .dish h3 match?
How many elements does #visit p match?
What is the specificity of #menu .dish p?
Remember
- A space means "anywhere inside", at any depth.
- Check from the right: take the element, climb its ancestors.
- Keep descendant chains short; long ones break when the HTML changes.