The Element States (Pseudo-Classes)
A pseudo-class is used to define a special state of an element.
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Using The CSS States
After selecting the element that you want style, right click to the selected element. There you will see available states, choose a state and start to styling.
The Available CSS States In The Editor
You may not see all the following states in the right-click menu, the editor shows just the appropriate states for the selected element.
|Hover||Applies styles to the element on mouse over.|
|Focus||Applies styles to the <input> element that has focus.|
|Unvisited||Applies styles to all unvisited links.|
|Visited||Applies styles to all visited links.|
|Active||Applies styles to the active link.|
|Checked||Applies styles to every checked <input> element.|
|Disabled||Applies styles to every disabled <input> element.|
|Enabled||Applies styles to every enabled <input> element.|
|Invalid||Applies styles to all <input> elements with an invalid value.|
|Valid||Applies styles to all <input> elements with an valid value.|
In the case of only hover state, the blue borders become yellow as in the following screenshot: