When would you prefer to use the child combinator instead of the descendant combinator?

Q: When would you prefer to use the child combinator instead of the descendant combinator?

The child combinator (`>`) is preferred when you want to target only the direct children of a parent element. This provides more precise control and avoids unintentionally styling nested or deeper descendant elements. When styling should only apply to immediate children and not grandchildren or deeper descendants. When aiming for better performance by reducing the number of elements the browser must evaluate. When creating maintainable CSS where specificity and hierarchy need to be explicit. When avoiding unexpected styles on nested elements within a complex DOM structure. div > p { color: green; } /* Only direct child of */ div p { color: blue; } /* All inside , including nested */ Direct child paragraph (green) Nested paragraph (blue)

Difficulty: 3/10

child vs descendant combinator, CSS specificity, component isolation

When to Use the Child Combinator

The child combinator (>) is preferred when you want to target only the direct children of a parent element. This provides more precise control and avoids unintentionally styling nested or deeper descendant elements.

Key Scenarios

1
When styling should only apply to immediate children and not grandchildren or deeper descendants.
2
When aiming for better performance by reducing the number of elements the browser must evaluate.
3
When creating maintainable CSS where specificity and hierarchy need to be explicit.
4
When avoiding unexpected styles on nested elements within a complex DOM structure.

Example: Using Child Combinator

Scenario Questions

0-2 years experience

1You're styling a navigation menu where each link is a direct child of the <ul>, but you notice some nested dropdown items are getting the same styles—how would you fix that using the child combinator?
2If you write .card > .title, but later someone adds a span inside .title, will that span get styled? Why or why not?
3You're told to style only the first-level list items in a sidebar, but not any nested ones. What CSS selector would you use and why?

Follow-up Questions

What happens if you accidentally use the descendant combinator in a reusable card component?
How would you debug a style that's applying to elements you didn't expect?
Can you think of a case where using > would break if the HTML structure changes?