How is the child combinator different from the descendant combinator?
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
Child combinator syntax:
A > B– selects onlyBelements that are immediate children ofA.Descendant combinator syntax:
A B– selects allBelements that are descendants ofAat 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.
Example: Child vs Descendant Combinator