How does the descendant combinator differ from a direct child combinator? Write an example of a descendant combinator selector. What is the impact of using multiple descendant selectors in a chain?
Descendant vs Child Combinators in CSS
The descendant combinator (space) selects all elements that are nested anywhere within a specified parent, while the direct child combinator (>) selects only elements that are immediate children of the parent.
Key Differences and Notes
Descendant combinator:
A Bselects allBelements insideAat any depth.Child combinator:
A > Bselects onlyBelements that are direct children ofA.Using multiple descendant selectors in a chain (e.g.,
div ul li a) increases specificity and targets elements deeply nested in the hierarchy.Excessive chaining can reduce CSS maintainability and may impact performance if overused in large DOMs.
Example: Descendant Combinator