How would you select all <p> elements that are inside a <div> using combinators? How would you style only the direct child <li> elements inside a <ul>?
Using Descendant and Child Combinators in CSS
You can use the descendant combinator (space) to select all <p> elements inside a <div> regardless of nesting depth, and the child combinator (>) to target only direct children, such as <li> elements inside a <ul>.
Key Points
Descendant combinator (
A B) selects allBelements nested anywhere insideA.Child combinator (
A > B) selects onlyBelements that are direct children ofA.These combinators allow precise targeting of elements based on DOM relationships without adding extra classes or IDs.
Using the correct combinator improves maintainability and performance by avoiding overly broad selectors.
Example: Descendant vs Child Combinator