Here are the four pseudo-classes for the aselector (or element):
a:link {color: #FF0000;} /* an unvisited link */
a:visited {color: #00FF00;} /* a visited link */
a:hover {color: #FF00FF;} /* a link with the mouse hovering
over it */
a:active {color: #0000FF;} /* the selected link */Notice that the selector (a) is separated from the pseudo-class’s name by a
colon. Also, you must list these styles in this order. Otherwise, the hoverand
activestyles won’t work right.
Here’s an example to try, to see how convenient this set of built-in behaviors is:
<html>
<head><style>a:link {color: blue;} /* an unvisited link */
a:visited {color: purple;} /* a visited link */
a:hover {color: red;} /* a link with the mouse hovering
over it */
a:active {color: green;} /* the selected link */</style>
</head><body style=”font-size=x-large”><a href=”http://www.cnn.com”>Click here for CNN</a></body>
</html>Notice that you don’t use any code to identify the pseudo-classes (such as
class=”visited”) in the body, in the element itself. Unlike ordinary classes
that you write yourself, a built-in (pseudo) class takes effect without you
having to add a class=attribute. After all, this set of pseudo-classes work
together to modify the behavior (the colors in this case) of the link element a.
If you save this example as an .htm file and load the file into Internet Explorer,
you’ll notice that the Click here for CNNlink does appear blue at first. It then
turns red as your mouse goes over it and turns green when you click it.
However, if you press F5 and try to “reload” the file to experience these
wonderful color changes once again, the link remains green! It’s supposed to.