CSS Pseudo-classes

Using CSS pseudo-classes , you can add special effects to some selectors. CSS gives you the ability to add effects to your anchor tags, otherwise known as links. Javascript is used in HTML to give this effect. But you can also do this using CSS.

The syntax of pseudo-classes:

selector:pseudo-class {property: value}

Now lets take another example to understand this better way.

Anchor Pseudo-classes

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS.

a:link {color: #FF1234} /* unvisited link */
a:visited {color: #00FFFF} /* visited link */
a:hover {color: #000000} /* mouse over link */
a:active {color: #FF0000} /* selected link */

Important to remember :

– a:hover MUST come after a:link
– a:active MUST come after a:hover
– Pseudo-class names are not case-sensitive