CSS: complex selector (combinator)

Complex selector

A selector that contains at least one combinator operator is called a complex selector.

Combinators (Relationship Selectors)

Combinator operators define the relationship between selectors.

Descendant combinator

• CSS: descendant selector (space)

e.g. div p

> Child combinator

• CSS: child selector (>)

e.g. div > p

+ Adjacent sibling

• CSS: adjacent sibling selector (+)

e.g. h2 + p

~ Subsequent sibling

• CSS: subsequent sibling selector (~)

e.g. h2 ~ p

• Combinators can be chained. e.g. div > ul li + p
• The selector expressions in Combinators can be compound selectors. e.g. div.x > h2 + p.y.

Combinator Operators Precedence

from loose to tight:

1. (space) descendant combinator
2. > Child combinator
3. + Adjacent sibling
4. ~ Subsequent sibling

you cannot use parenthesis to specify syntax precedence.

For example, this:

.a > .b .c + .d { color: red; }

means:

((.a > .b) (.c + .d))

not the following:

(.a > (.b .c)) + .d

((.a > .b) .c) + .d

• CSS combinator precedence test

• Why is CSS selector syntax cannot use parenthesis for operator precedence (2026)