Style :hover, :focus, and :active states (and per-breakpoint overrides) from a class — a single definition carries all its interactive states.
Where: Right sidebar → class selector → state/selector switcher — Select a classed element and switch the editing state
Key ideas
- Contextual selectors: Classes support :hover, :focus, and :active variants plus per-breakpoint overrides from one definition.
- Edit-on-state: Switch the active state, then style — changes are scoped to that state of the class.
- Property source colors: Blue = inline on this element, Orange = from a class, Yellow = mixed/overridden.
Steps
- Select an element that has a class applied.
- Switch the editing state to Hover (or Focus/Active) in the sidebar.
- Change styles — they apply only to that state.
- Switch back to the default state to confirm the base style.