🎯States and selectors

Style elements differently based on user interaction (hover, focus, active) or target virtual parts of an element (::before, ::after) using states and selectors.

States and selectors let you apply styles conditionally — for example, change a button's color on hover, or add decorative content with ::before.

They live in the Style Sources dropdown alongside your Tokens. Open it by clicking the Style Sources area above the Style Panel or pressing ⌘ + Enter (Mac) / Ctrl + Enter (Windows).

Available states appear at the bottom of the Style Sources dropdown

States (pseudo-classes)

States are CSS pseudo-classes that apply styles when a condition is true, such as the user hovering over an element.

Adding a state

1. Select an instance on the canvas.

2. Open the Style Sources dropdown (⌘ + Enter).

3. Choose a state from the list at the bottom, or type one in.

4. The state appears as a tag in the style sources area. While it's active, every style you set applies only to that state.

5. Click the state tag again to deselect it and return to the base (default) styles.

The :hover state is selected — styles set now only apply on hover

Custom states

You can type any valid CSS pseudo-class into the Style Sources dropdown. If it's not in the predefined list, Webstudio will accept it as a custom selector.

Custom selectors are useful for advanced cases, but stick to the predefined states when possible — they are validated and shown in autocomplete.

Pseudo-elements

Pseudo-elements target virtual parts of an element, such as inserting content before or after it, or styling the first letter.

Adding a pseudo-element

1. Select an instance.

2. Open the Style Sources dropdown (⌘ + Enter).

3. Type ::before, ::after, or another pseudo-element — autocomplete will suggest matches.

4. The pseudo-element appears as a tag. While selected, styles apply to that virtual element.

Type :: to see available pseudo-elements

Common pseudo-elements

Pseudo-element	What it targets
::before	Virtual element inserted before the content
::after	Virtual element inserted after the content
::placeholder	Placeholder text in inputs and textareas
::selection	Text selected/highlighted by the user
::first-letter	First letter of a block element
::first-line	First line of a block element
::marker	Bullet or number of a list item
::backdrop	Box behind a fullscreen or modal element

::before and ::after require a content value to be visible. Set it in the Advanced section — even an empty string ("") works.

Example: decorative element with ::before

1. Select a Box, Link, or Button.

2. Add ::before via the Style Sources dropdown.

3. In the Advanced section, set content to "".

4. Set display to block and give it a width, height, and background.

5. Deselect the ::before tag to go back to the base styles.

A ::before element styled as a decorative bar

Combining states and tokens

States work together with Tokens. When you have a Token selected, adding a state applies styles for that state within that Token. This keeps hover styles, focus styles, and base styles neatly organized.

You can also use CSS variables to create parent-child interactions — define variables on the parent, then change their values on the :hover state so all children update at once. See Parent-child interactions for details.

Related

• CSS variables – Define reusable values and create parent-child hover interactions

• Design tokens – Package multiple styles for reuse

• Anatomy of the Webstudio builder – Learn about the Style Panel and Style Sources

• Shortcuts – Keyboard shortcuts including ⌘ + Enter for Style Sources