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
The None state is the default state of elements.
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.
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.
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.