How is the child combinator different from the descendant combinator?

Q: How is the child combinator different from the descendant combinator?

The child combinator (`>`) selects only the elements that are direct children of a specified parent, whereas the descendant combinator (space) selects all elements nested at any depth within the parent. Child combinator syntax: `A > B` – selects only `B` elements that are immediate children of `A`. Descendant combinator syntax: `A B` – selects all `B` elements that are descendants of `A` at any depth. Child combinator is more specific and generally more performant than the descendant combinator. Descendant combinator is useful for styling deeply nested elements without targeting intermediate parents. div > p { color: green; } /* Direct child of */ div p { color: blue; } /* All inside , any depth */ Direct child paragraph (green) Nested paragraph (blue)

Difficulty: 5/10

CSS Selectors, CSS Architecture, Specificity

Child Combinator vs Descendant Combinator

The child combinator (>) selects only the elements that are direct children of a specified parent, whereas the descendant combinator (space) selects all elements nested at any depth within the parent.

Key Differences

1
Child combinator syntax: A > B – selects only B elements that are immediate children of A.
2
Descendant combinator syntax: A B – selects all B elements that are descendants of A at any depth.
3

Example: Child vs Descendant Combinator

Scenario Questions

0-2 years experience

1Imagine you have a navigation bar with a nested dropdown list. If you want to style only the top-level list items to have a horizontal layout, but keep the dropdown items vertical, how would you write your CSS selectors to target just those top-level items?
2You're working on a card component that has a '.title' class. Inside this card, there's a rich-text editor output that also happens to render elements with a '.title' class. If you write '.card .title { font-size: 24px; }', what happens to the titles inside the rich-text editor, and how would you fix it so only the card's main title is affected?

Follow-up Questions

How do browser style engines evaluate these selectors (right-to-left), and does it impact performance at scale?
How does the use of child combinators affect your ability to write CSS overrides in a theme?
When would you prefer a flat BEM class over a child combinator?