Combinators relate two selectors by their position in the document tree. They add no specificity; only the selectors on each side count.
| Selector | Matches | Specificity |
|---|---|---|
| nav a | <a> anywhere inside <nav> | 0-0-2 |
| ul > li | <li> whose parent is <ul> | 0-0-2 |
| h2 + p | <p> right after an <h2> | 0-0-2 |
| h2 ~ p | Any later sibling <p> | 0-0-2 |
| .menu > * | Every child of .menu | 0-1-0 |
Combinators only look down or forward; :has() (Logical Combinators) selects parents and previous siblings. In JavaScript, el.querySelectorAll(":scope > li") returns only the direct children of el.