Hover states and selectors
Buttons darken on hover, inputs glow on focus, disabled controls fade — those are the same element in a different state , and each state can carry its own styles. In Studio you style states with the selector menu in the Style inspector 's toolbar, next to the breakpoint tabs.
Style a state
Select the element and open the Style tab.
Open the selector menu — it reads (base) when you're styling the element's normal look.
Pick a state, say
. Edit styles as usual. Everything you set now applies only in that state.
The full inspector works here — every section, the set-dots, even the breakpoint tabs, so a hover effect can differ between desktop and phone. Values the state inherits from the element's base styles show as dimmed placeholders. Switch the menu back to (base) to return to the normal styles.
The built-in states
The menu offers the common ones:
They mean what they mean on the web:
:hover
while the pointer is over the element,
:focus
while it holds keyboard focus,
:first-child
/
:last-child
when it's the first or last among its siblings,
::placeholder
for an input's hint text.
Add your own selector
Choose + Add custom… at the bottom of the menu, type a selector, and press Enter :
:nth-child(2)— any state or position selector beyond the built-ins..featured— only when the element has that class.&.active— only when the element itself carries theactiveclass.[disabled]— only when the element has that attribute.
A custom selector must start with
:
,
.
,
&
, or
[
. Once created it joins the menu for that element, marked with
●
while it has styles. Rules for elements
inside
the selection are the inspector's
Relative Styling
section instead — clicking a rule there drills into it through this same selector context.
Remove state styles
Switch the menu to the state and clear its values with their dots — property by property, or a whole section from its header dot. When a state has no values left, it drops out of the menu's marked entries.
Each state is saved as a nested rule inside the element's
style
object — real CSS pseudo-classes that behave natively on the published page. The format is described in
Styling
.
Next
Combine states with screen sizes in Breakpoints
Give every link and button a default hover in the Stylebook
Suite