Style states are an important concept for designers and developers to understand. They refer to how a particular element or design feature looks different in different contexts. In the world of user interfaces and app design, there are various occasions when elements may appear differently; this could be when a user mouses over it, after a user clicks on it for the first time, when it is in focus compared to when it isn't, and so on.

To create these special effects and make interface elements look distinct in each state, designers often use something known as pseudo-classes. Pseudo-classes allow styling that is specific to the specified state of an element. An example of this would be how the 'like' button such as the one below displays differently when a user hovers over it. In this case, the background color changes to red.

To help identify elements with pseudo-classes, a blue dot appears by their side in the Elements panel. Blue dots also appear on the stage, where each element in the mini tree indicates that the child has states applied, and in the list of selectors in the Styles panel.