A pseudo-class is used to define a special state of an element. For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
You can specify a pseudo-classes as follows:
Links can be displayed in different ways using pseudo classes. Want to change the color of link on mouse hover or after a visit or when link gets active by mouse click, that’s how you can do it:
You must note that a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.
Pseudo-classes can be combined with CSS classes. When you hover over the link in the example, it will change color:
You can change the color of <div> using :hover pseudo-class as well: