Combinators
A combinator joins two compound selectors and states how the elements they match must be related in the document tree: ancestor and descendant, parent and child, or earlier and later sibling. The selector always matches the element on the right. The pieces being joined are under Basic selectors; to select an element by what comes after or inside it, use :has().
Tree combinators
Descendant combinator (space)
Whitespace between two selectors matches an element that is anywhere inside an element matching the left-hand selector, at any depth.
| Syntax | A B |
|---|---|
| Specificity | Adds nothing; the sum of A and B |
| Support | Chrome 1 · Firefox 1 · Safari 1 |
| Spec | selectors-4 |
nav a { text-decoration: none; }>
The child combinator matches an element whose parent matches the left-hand selector. Unlike the descendant combinator, it does not reach grandchildren.
| Syntax | A > B |
|---|---|
| Specificity | Adds nothing; the sum of A and B |
| Support | Chrome 1 · Firefox 1 · Safari 1 |
| Spec | selectors-4 |
ul > li { margin-block: 0.25rem; }Sibling combinators
+
The next-sibling combinator matches an element that comes immediately after an element matching the left-hand selector, with the same parent. Text and comments between them are ignored.
| Syntax | A + B |
|---|---|
| Specificity | Adds nothing; the sum of A and B |
| Support | Chrome 1 · Firefox 1 · Safari 1 |
| Spec | selectors-4 |
h2 + p { margin-block-start: 0; }~
The subsequent-sibling combinator matches an element that comes anywhere after an element matching the left-hand selector, with the same parent. It only looks forward: earlier siblings are not matched.
| Syntax | A ~ B |
|---|---|
| Specificity | Adds nothing; the sum of A and B |
| Support | Chrome 1 · Firefox 1 · Safari 3 |
| Spec | selectors-4 |
input:checked ~ .panel { display: block; }