Contact Us or call 1-877-932-8228


The styles we have seen so far are attached to element names (e.g., div), class or id attributes (e.g., .big, #wrapper), or position in the page structure (e.g., ul ul). Pseudo-classes are used to classify elements by other means. The syntax of pseudo-classes is element:class.

Currently, the best supported pseudo-classes all apply to link states. A link can have the following pseudo-classes:

  • a:hover - indicates the mouse pointer is over the link
  • a:visited - indicates the link has been visited
  • a:active - indicates the link is active (e.g., the user has clicked down on it)

Code Sample:

<meta charset="UTF-8">
<title>CSS Links</title>
<style type="text/css">
	a {
		color: #000066;
		text-decoration: none;
		cursor: pointer;
	a:visited {
		color: #336699;
	a:hover {
		color: #ff6600;
		text-decoration: underline;
	a:active {
		color: #ffcc99;
		cursor: wait;
<h1>CSS Links</h1>
<a href=""></a><br>
<a href="">Webucator</a><br>
<a href="">Google</a><br>

<h3 style="color: red; margin-bottom: 2px;">Important Note</h3>

Order matters.  If <span style="font-family: monospace;">a: active</span> 
precedes <span style="font-family: monospace;">a: hover</span>,
the effects in <span style="font-family: monospace;">a: hover</span> will 
take precedence. So, in this example, you would not see the color 
change when the user clicks down on a link.


The code above will change how links look as the user interacts with them. To see the effects, open the page in a browser.

Note that a link can be in more than one state. For example, a link can be both visited and active. As a result, the order of the style rules matters.

If a:active precedes a:visited, then the rule for a:visited will take precedence. This means that, where there are conflicts, those properties defined for a:active will not be seen for visited links.