Nested Selectors

A nested selector is one you write yourself, derived from a class — .card .card-title,
.card.is-open, .card::after — rather than picked from the list of
states.

The same menu's Create Selector lets you write your own suffix instead of picking a
state. Click it and an inline field opens with the class name already fixed as the prefix:

Type the rest of the selector and press Enter. & again means the class itself:

The new selector becomes active immediately, and the chip shows both halves so you always
know what you're styling:

Nested selectors belong to their parent class: they travel with it, they're listed under
it in the Selectors panel and in this menu (with a dot on the ones that have styles), and
they're written into the stylesheet directly after the parent's rule.