Styla saysCombinators relate selectors: descendant (space), child (>), adjacent (+), and general sibling (~).
Combinators select based on relationships. nav a = any link inside a nav (descendant). ul > li = direct children only. h2 + p = the paragraph immediately after an h2 (adjacent sibling). h2 ~ p = all later sibling paragraphs. They let you target by structure instead of sprinkling classes.
Power-ups you unlock
A B = descendant (any depth) · A > B = direct child
A + B = adjacent sibling · A ~ B = later siblings
Combine to target by document structure
Reduce class clutter by selecting relationships
The Specificity Sphinx attacks — common mistakes
Using descendant when you meant direct child (>)
Over-nesting selectors → fragile, slow rules
Assuming + matches any following sibling (it’s only the next)
Boss battleStyle only the direct <li> children of a <ul>, and the first <p> right after each <h2>.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>ul>li{color:#b388ff}h2+p{color:#8aff9d}</style></head><body style="background:#06040d;color:#e6e0ff;padding:20px">
<ul><li>direct child</li></ul><h2>heading</h2><p>right after h2</p><p>not styled</p></body></html>