Link Pseudo-Classes

There are two link pseudo-classes that provide the means to distinguish unvisited and visited hyperlinks on a page. In addition, a pair of dynamic pseudo-classes are used with links to specify the appearance of hyperlinks when a user interacts with the links.

The four pseudo-classes which pertain to links are:

`:link`	This is the appearance of the link when it has not been visited
`:visited`	The appearance of the link when it has been visited at least once.
`:hover`	This is the appearance of the link when the user holds the cursor over the link
`:active`	The appearance of the link when the user clicks the mouse button on the link

General Syntax for the Link Pseudo-classes (and associated Dynamic Pseudo-classes)

a:link { declarations... }
a:visited { declarations... }
element:hover { declarations... }
element:active { declarations... }

The link pseudo-classes are supported in IE 6 and higher!

The two link pseudo-classes are :LINK and :VISITED. They are similar in functionality to the HTML 3.2 BODY attributes LINK AND VLINK, but much more powerful.

The :LINK pseudo-class enables the designer to specify the appearance of a hyperlink that has not been visited. Similarly, the :VISITED pseudo-class is used to specify properties for a hyperlink that has been visited. Since you can apply the vast array of CSS properties to the link, you can accomplish very creative effects using only CSS.

The :HOVER and :ACTIVE pseudo-classes are dynamic; they describe the appearance of the link in the mouse-over state (when the user holds the cursor over an element), and in the mouse-down state (when the user clicks the mouse button while the cursor is over an element).

You don't have to specify a rule for every state for a link, but those you do specify must be created in the order listed above. Otherwise, the browser may ignore one of the states. The Stylin' author offers this mnemonic to help you remember the order: "LoVe...HA!"

Let's examine the use of the link and dynamic pseudo-classes with the following example. We have two DIVs, each specifying different properties for links.

Example Style Sheet

/* Example 1 Link Styling */
 
#example1 a:link, #example1 a:visited,
#example1 a:hover, #example1 a:active { 
  padding: 0.5em;
  font-weight: bold;
  }
 
#example1 a:link    { color: red; }
#example1 a:visited { color: green; }
#example1 a:hover   { background-color: black; }
#example1 a:active  { color: purple; }
 
/* Example 2 Link Styling */
 
#example2 a:link, #example2 a:visited,
#example2 a:hover, #example2 a:active { 
  margin: 0 0.25em 0 0;
  padding: 0.75em;
  font-weight: bold;
  }
 
#example2 a:link    { color: #FFF;  background-color: blue; }
#example2 a:visited { color: red;   background-color: #666; }
#example2 a:hover   { color: green; background-color: yellow; }
#example2 a:active  { color: blue;  background-color: #FFF; }

Example Markup

<!-- Example #1 -->
 
<div ID="example1">
   <a href="http://www.w3.org/TR/REC-html40/index/elements.html"> »
       W3C HTML Elements</a> |
   <a href="http://www.w3.org/TR/REC-html40/index/attributes.html"> »
       W3C HTML Attributes</a> |
   <a href="http://www.w3.org/TR/2006/WD-CSS21-20061106/selector.html"> »
       CSS 2.1 Selectors</a>
</div>
 
<!-- Example #2 -->
 
<div ID="example2">
   <a href="http://www.csszengarden.com">CSS Zen Garden</a>
   <a href="http://www.alistapart.com">A List Apart</a>
   <a href="http://www.cssplay.co.uk/index.html">CSS Play</a>
</div>

Rendered Example

W3C HTML Elements | W3C HTML Attributes | CSS 2.1 Selectors

CSS Zen Garden A List Apart CSS Play

The Dynamic Pseudo-Classes

The Stylin' author states that "you can use any selector with [the link] pseudo-classes, not just A, to create all kinds of rollover effects." However, unlike :HOVER and :ACTIVE, applying :LINK and :VISITED to elements other than the A tag will have no effect. This is why :LINK and :VISITED are specifically classified as link pseudo-classes, while :HOVER and :ACTIVE are classified as dynamic pseudo-classes.

Earlier in this lecture I explained that the :HOVER and the :ACTIVE pseudo-classes are dynamic in the sense that they change the appearance of elements depending on user interaction. In fact, they aren't really link pseudo-classes, they are officially classified as dynamic pseudo-classes.

Dynamic pseudo-classes, also known as user-action pseudo-classes, change the rendering of any element in response to user actions. That is, they can be applied to any element; not just the A tag.

For example, you can apply the :HOVER and :ACTIVE pseudo-classes to a P tag, which allows you to change the appearance of the paragraph when you rollover the paragraph; or click on it.

Here's an example of the :HOVER and ACTIVE pseudo-classes applied to a P tag. In this example, there are three P elements. The second P tag has been assigned the ID "dynaPseudoClass". This allows us to target the link pseudo-class styles to the dynaPseudoClass P element.

The markup for this example is below:

Example Markup

<p>
  This is a normal paragraph, nothing special here.
</p>
 
<p id="dynaPseudoClass" >
  This paragraph has :LINK, :VISITED, :HOVER and
  :ACTIVE pseudo-classes applied to it. Click on this
  paragraph. Note that only the :HOVER and :ACTIVE
  states have any effect.
  :LINK and :VISITED pseudo-classes only have effect
  for A tags.
</p>
 
<p>
  This is another normal paragraph, nothing special here.
</p>

The link and dynamic pseudo-classes are applied to the dynaPseudoClass paragraph with the following rules:

Example Style sheet

p#dynaPseudoClass:link    { font-weight: bold; color: green; }
p#dynaPseudoClass:visited { font-weight: bold; color: pink; }
p#dynaPseudoClass:hover   { color: red; }
p#dynaPseudoClass:active  { color: blue; }

IE6 and below does not allow :HOVER and :ACTIVE to select any elements other than hyperlinks.

As I noted earlier, the link pseudo-classes only have an effect for the A tag. I applied :LINK and :VISITED pseudo-classes to the P tag to demonstrate whether or not they have an effect.

Now, open the example and pass your cursor over the second paragraph, then click the mouse button, holding it down for a moment to see the effect. Did you see that the :LINK and :VISITED link pseudo-classes have no effect when they are attached to a tag that is not an A tag?