From the specification:
A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element.
Simple selectors are all the little bits – a class, a tag, an ID, etc. Those can be combined in various ways.
These are compound selectors:
img#hero { … }
a:focus { … }
.only.with.all.of.these.classes { … }A complex selector is a sequence of one or more compound selectors separated by combinators.
Those compound selectors weren’t complex enough for you? Try combining them! These selectors are complex:
#hero img { … }
a:focus > .icon { … }
.only.with ~ .all.of ~ .these.siblings { … }Simple selectors describe element properties, that can get merged together into compound selectors describing entire elements, and then joined into complex selectors that put those elements in the context of relationships. And we can string all that together into selector lists, targeting multiple elements based on a variety of properties and relationships. It’s a big world out there, kids. A big, declarative, cascading world.
Now you I know.
Now you I can forget again,
and know exactly where to look.