Element state
The element state button is the square button to the right of the rule selector on the Style tab. It makes the selected element look and behave in the editor as if it were in a state such as :hover, so that state’s styles can be seen and edited.
Button
| Label | State |
|---|---|
| ○ | Neutral (default) — no state forced. |
| hov | :hover |
| act | :active |
| foc | :focus |
| f-v | :focus-visible |
| f-w | :focus-within |
| vis | :visited |
The button is highlighted while a state other than neutral is active.
Available states
| State | Offered for |
|---|---|
:hover, :active, :focus-within | Every element |
:focus, :focus-visible | Elements that can receive focus: links with href, buttons, form fields, iframes, summary, and elements with tabindex or contenteditable |
:visited | Links with href |
A green dot next to a state means the project has at least one rule for this element in that state.
Effects of a forced state
| Area | Effect |
|---|---|
| Canvas | The element is drawn with its state styles. |
| Rule selector | Lists the rules that apply in that state, including rules such as .btn:hover. In neutral, state-only rules are not listed. |
| Style target | Shows the element’s values in that state. An edit goes to the rule that wins in that state — with :hover forced, changing color edits the :hover rule if that rule sets the color. |
| Source dot | Reflects the state as well. Its “move to” list always includes state rules, in any state. |
Reset
The state returns to neutral when you select a different element, when you choose neutral, or when you leave the Style tab. Forcing a state never changes the page itself; nothing is saved.
Limits
- The state is forced on the selected element only. A rule such as
.card:hover .title(title styled while the card is hovered) shows on the canvas when the card is selected with:hover, not when the title is. - With several elements selected, the state is forced on all of them.
Related
- How-to: Style an element on hover
- Explanation: How simulated element states work