CSS: combinator selectors
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
e.g. div p
Child combinator
e.g. div > p
Adjacent sibling
e.g. h2 + p
Subsequent sibling
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:
>Child combinator+Adjacent sibling~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