CSS: Anchor Pseudo Classes
Introduction
Author: Martin WarningYear: 2008
License: Free
CSS knows five anchor pseudo classes for the different statuses an object can have. These pseudo classes are most commonly used on links, but depending on the object and the status it can be applied on other objects as well. First of we start with the five available statuses:
:link for an unvisited link:visited for a visited link
:active for when the user clicks on the link
:hover for the mouse over an object event
:focus for when an object receives focus, useful for form elements
The first 3 pseudo classes :link,:visited,:active only apply to links. The :hover pseudo class can be used on any object. The :focus pseudo class can be used with links, but would do the same as the :active pseudo class. Instead it's more useful in forms as it's activated when a user puts the cursor in for example a text box. Be aware that currently Microsoft Internet Explorer (up to version 7 as of date of writing) doesn't support the :focus pseudo class.
Order
With CSS the order in which you write your CSS code is important as what is defined last takes presidence over earlier CSS code. As such the order of the pseudo classes should be the following: :link, :visited, :hover, :active, :focus in order for these to work properly.
How to implement
You can add the pseudo elements to any selector or class making sure it comes after these. Examples:
a:link{color:red;}
a.biglinks:visited{color:green;}
.header:hover{color:yellow;}
#menu:active{color:blue;}
Another example to show how to implement pseudo classes on a link:
a:link{color:black;text-decoration:none;}
a:visited{color:green;text-decoration:none;}
a:hover{color:red;text-decoration:underline;}
a:active{color:blue;text-decoration:underline;}
