Why does a CSS selector match more elements than I expected?

The space means “descendant,” not “direct child”: the paragraph can be nested at any depth inside an element with class card. [S1] Try tracing this small tree:

<section class="card">
  <p>Direct paragraph</p>
  <div class="body">
    <p>Nested paragraph</p>
  </div>
</section>
<p>Outside paragraph</p>

For .card p, start at each p and ask whether it has a .card ancestor. Both paragraphs inside the section qualify, including the nested one. The outside paragraph has no such ancestor, so it does not qualify. If you want only direct child paragraphs, use .card > p; the > requires the p to be a direct child of .card. [S1]

Work from right to left. First list elements matching the selector’s rightmost part, then check whether each candidate satisfies the relationship immediately to its left. MDN describes complex selectors as expressing simultaneous conditions and notes that they can be read this way. [S2]

For example, in .card > .body p, start with each p. It must have an ancestor with class body, and that .body element must be a direct child of .card. The space permits the paragraph to be deeper inside .body; the > restricts the relationship between .card and .body. [S1]

Sibling combinators use a different relationship. In h2 + p, the p must immediately follow an h2 and share its parent. In h2 ~ p, a matching p can follow the h2 later under the same parent; it need not be adjacent. [S1] Draw the relevant parent and sibling order, then check each candidate against the exact relationship.

It combines alternatives: an element matches the comma-separated list if it matches at least one branch. The comma means “or,” not “and.” [S2]

Check .card p on its own, then .notice p on its own. In the example above, add <aside class="notice"><p>Notice paragraph</p></aside> outside the section. The paragraph in the section matches the first branch; the notice paragraph matches the second. Neither needs to satisfy both branches. [S2]

When debugging a list, write down the matches for each branch separately, then combine them. That makes it easier to spot whether the unexpected element qualifies through a different branch than the one you were examining.

Use a reduced HTML example that keeps the relevant nesting, classes, and sibling order. Then:

1. Copy the selector exactly and list elements that could match its rightmost part.
2. For each candidate, trace left. Check ancestors for a space, direct parenthood for >, and same-parent sibling order for + or ~. [S1]
3. If the selector has commas, test every branch separately and combine the results as alternatives. [S2]
4. Write down the intended and unexpected matches. For each unexpected element, note which branch and relationships allow it to qualify.
5. Change one relationship at a time and trace the selector again against the reduced example.

For .card p, for instance, the nested paragraph qualifies because it has a .card ancestor. If only direct paragraphs are intended, compare that result with .card > p. The trace explains what the selector’s relationships allow; check the revised rule in the page where you use it.