Pseudo-classes in action

The main aim is to allow all states to be available to the user. This means that order is critical. A user should be able to see a link (:link) or visited link (:visited), then be able to hover over it (:hover) and click on it (:active). This means that :link and :visited must come before :hover and :active.

Users should also be able to tab to the link using the keyboard and then see the link in focus (:focus). When in focus, they may wish to roll over the link and then click on it. This means that the final order should be:

1. a:link
2. a:visited
3. a:focus
4. a:hover
5. a:active

This is a link and this is a visited link

a:link
{
	color: blue;
	background: white;
}

a:visited
{
	color: purple;
	background: white;
}

a:focus
{
	color: white;
	background: black;
}

a:hover
{
	color: black;
	background: yellow;
}

a:active
{
	color: white;
	background: red;
}