Menu
Advanced Selectors
CSS Combinators
Descendant, Child, Adjacent Sibling, General Sibling.
1Relationships
Select elements based on relationship to others.
Example Code
css
div p { color: red; } /* Descendant (space) */
div > p { color: blue; } /* Direct Child (>) */
div + p { color: green; } /* Adjacent Sibling (+) */2Understand it in a real interface
Combinators describe a relationship between elements. A descendant selector can match deep inside a container; a child combinator matches only direct children. Sibling relationships can target nearby elements, but they depend on the markup’s order and can become fragile when the structure changes.
3Try it yourself
Create a list with a nested list. Style all descendants with one selector and direct children with another. Compare the results, then add a wrapper around an item and inspect which rule stops matching. Choose a selector whose relationship is intentional and easy to maintain.
Finished reading?
Mark this topic as complete to track progress.