CSS Combinators
CSS combinators define how selectors relate to each other. This enables more precise and targeted styling in complex HTML structures.
Types of Combinators
CSS has four fundamental combinators: descendant, child, adjacent sibling, and general sibling. These can be used in different ways to target HTML elements.
| Combinator | Description |
|---|---|
| A B | Selects all B elements that are inside element A. |
| A > B | Selects B elements that are direct children of A. |
| A + B | Selects the first B element that comes immediately after A. |
| A ~ B | Selects all B elements that follow A, not only immediately. |
Descendant and Child Combinators
The descendant combinator (space) selects all inner elements, while the child combinator (>) selects only direct children. This allows for more precise styling.
In the following example, you can see how the descendant and child combinators work:
Adjacent and General Sibling Combinators
The adjacent sibling combinator (+) selects only the immediately following sibling, while the general sibling combinator (~) selects all later siblings.
Which combinator selects ONLY the direct child B elements of A?
Tips for Using Combinators
Combinators help with precise styling, but overusing them can make code complicated. Here are some tips:
- Only use complex combinators when truly necessary.
- Avoid overly deep descendant selectors, as they hurt readability.
- Use classes for cleaner and more reusable code.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
