To add interactivity to your elements, you can change the way they look and behave in different states.

As you're styling an element, clicking the State menu lets you select between the various states, like hover and focused, you can access and style.


There are four states that you can set for any element:

  • None or Default

  • Hover

  • Click

  • Even/Odd

None state

The None state is the default state of elements.

Hover state

The hover state shows when you hover your mouse pointer on an element. It’s not possible to hover on most touch devices so be aware of this when designing for smaller breakpoints.

Using Hover State for a Button

Clicked state

The clicked or active state is the state that shows when you click or press on an element. This state inherits styles from the hover state as pressed is actually a state of the hover state.

Using Click State for a Button

Even/Odd State (:nth-child() Selector)

Suppose if you want to add some CSS property for every Odd/Even Number Element (1,3,5,7 ...) or (2,4,6,8...) you can make use of this property.

Adding Background Color for every Even Number Div