What is the descendant combinator in CSS?

Q: What is the descendant combinator in CSS?

The descendant combinator in CSS is a space character (` `) that selects all elements that are descendants of a specified parent element, at any depth in the DOM tree. Syntax: `A B` – selects all `B` elements inside `A` regardless of depth. It applies styles to nested elements without needing direct parent-child relationship. Useful for targeting elements deeply nested within a container without adding extra classes. div p { color: blue; } /* Selects all inside */ Paragraph 1 (inside div) Paragraph 2 (nested inside section within div) Paragraph 3 (outside div, not selected)

Difficulty: 3/10

selector specificity, CSS performance, maintainability

Descendant Combinator in CSS

The descendant combinator in CSS is a space character ( ) that selects all elements that are descendants of a specified parent element, at any depth in the DOM tree.

Key Points

1
Syntax: A B – selects all B elements inside A regardless of depth.
2
It applies styles to nested elements without needing direct parent-child relationship.
3
Useful for targeting elements deeply nested within a container without adding extra classes.

Example: Using Descendant Combinator

Scenario Questions

0-2 years experience

1You have a <nav> with <ul> and <li> elements. How would you write CSS to style only the <a> tags inside those <li> without affecting other links on the page?
2If you write `.card .title { color: red; }`, which elements will this rule apply to?
3What difference does a space make in `.button .active` versus `.button.active`?

Follow-up Questions

How does the specificity of a descendant selector compare to a simple class selector?
What performance concerns arise with very deep descendant selectors on large pages?
When would you prefer the child combinator (>) over a descendant combinator?