CSS states (also called pseudo-classes) are special selectors that target elements based on their current condition or position in the document. Here are the key types:

Interactive States:

• :hover - Activates when mouse pointer is over the element

• :focus - Triggers when element receives keyboard/mouse focus

• :active - Applies while element is being clicked/activated

• :visited - Styles links that have been previously visited

Structural States:

• :first-child - Selects element that is first among its siblings

• :last-child - Targets the last element among siblings

• :nth-child(n) - Selects element based on position formula

• :only-child - Matches elements with no siblings

Element states can be set by selecting or creating custom ones in the States control.

New options will be shown depending on the selected element.

Example: Set a button background color on hover

Select the Button element (not the inner Button text element).

Decide whether you want to set the hover state at the instance or class level. If the latter, add your class and ensure that it is selected.

Set a background color in the normal state.

Click in the States control and select hover.

Set your desired hover background color.

To switch to normal state, click on any other element and back to the current one.

To see the effect, press Ctrl/Cmd+P (play mode).

This video shows setting a background color for a custom class in hover state:

Styling descendant selectors using a custom state

There could be times where you want to style selectors like .marquee-3d .marquee__block. That targets any element having a class of marquee__block but only if it has a parent having a class of marquee-3d.

Clutch enables us to do this visually in the UI by creating a state for marquee-3d class having a value of your descendant selector i.e., .marquee__block, in this example.

When done, these styles will apply to any component having the marquee__block class that’s nested under a component having marquee-3d class.

This is equivalent to:

.marquee-3d .marquee__block {
  max-width: 240px;
}

Note: You can still select an component with the class of marquee__block, regardless of whether it is nested inside another component with the class of marquee-3d or not and let Clutch generate the CSS for you directly for that selector (.marquee__block).