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.
- Designer-named state catalog: States extend beyond Hover/Focus/Pressed into a grouped catalog for interaction, form, link, and list-position conditions, including sticky Clicked (toggle).
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.
Pressed versus Clicked
Pressed maps to :active and lasts only while the pointer is held. Clicked (toggle) sets data-f0-toggled and stays active until the next click.
State groups and useful cases
- Interaction: hover, pointer-down, sticky toggle, focus, keyboard-only focus, and focus within.
- Form: enabled/disabled, checked/unchecked, required/optional, valid/invalid, and placeholder shown.
- Link: visited or unvisited.
- Position in list: first, last, only, odd, even, or empty.
Tips
- Use Focus (keyboard only) for visible keyboard focus without painting the same ring after every mouse click.
- Preview form and link states with real compatible elements; a selector cannot create the native condition by itself.
Limitations and important notes
- A state style applies only when the element can actually enter that browser/runtime condition.
- Clicked (toggle) is a flowmo runtime attribute state; it is not the same as the browser’s short-lived :active pseudo-class.
Troubleshooting
A state is visible in the editor but never occurs in Preview
Confirm the selected element can enter that condition—for example a checkbox for Checked, an invalid form control for Invalid, or a link with a visited URL for Visited.