Unveiling the Power of CSS Link Pseudo-classes

Link pseudo-classes give web designers the ability to style various states of HTML links. The CSS pseudo-classes commonly used for styling hyperlinks are :link, :visited, :hover, :active, and :focus. Example:

/* Default */ a { color: blue; } /* Unvisited links */ a:link { color: blue; } /* Visited links */ a:visited { color: purple; } /* Hover state */ a:hover { color: red; } /* Focused state */ a:focus { color: orange; } /* Activated state */ a:active { color: green; }

Overview

Here’s a description of each pseudo-class:

• :link – selects unvisited links.
• :visited – selects visited links.
• :hover – the state that happens when the user places their mouse pointer on top of a link.
• :active – the state that happens when the user clicks on a link. This is the very brief moment between clicking on the link and becoming focused, or the moment between clicking and then going to another web page. Because this state normally lasts for a short duration, you can see this state easier when you click-and-mouse-down on a link without releasing the mouse button.
• :focus – the state that occurs when the user focuses on the link. This state can be seen when you tab to a link, or after you click on a link.

Technically, out of the five most commonly used pseudo-classes for links, only two — :link and :visited — are actually the link pseudo-classes that are specifically designed for HTML link (<a>) elements. The other three — :hover, :active, and :focus — are called dynamic pseudo-classes and can be used on other HTML elements.

Combining Pseudo-classes

For greater CSS specificity, you can use a combination of pseudo-classes.

For example, you may wish to have a different appearance when a user hovers over a visited link versus an unvisited link.

a:link { color: blue; } a:visited { color: purple; } a:link:hover { color: green; } a:visited:hover { color: red; }

In the preceding example, when users hover over an unvisited link, its anchor text will become green. But if it’s a visited link, the anchor text will become red.

Order of Pseudo-classes

Because of CSS specificity, links can match multiple pseudo-classes at the same time. This is the reason why the order of style rules in your stylesheets is crucial. An example where two pseudo-classes are matched at the same time is when a link is clicked on.

At the start of the click event, the link briefly matches both :hover and :active states because the mouse pointer is still on top of the link while the link is being activated. We know that if two selectors are equal in specificity, by default, the selector further down the stylesheet wins. Thus, if the :active style rule is above the :hover style rule, users will never get to see the :active style rule applied because the :hover style rule supersedes it.

So that all link pseudo-class style rules are rendered successfully, this is the suggested order:

a { } a:link { } a:visited { } a:hover { } a:focus { } a:active { } 

Case-insensitivity

W3C’s pseudo-class specs permit any type of casing style. This means writing pseudo-class names in all-caps, all-lowercase, or any other casing style will work. However, the prevailing best practice is to write pseudo-class names in all-lowercase.

All of these :link pseudo-class variations will work and are technically equivalent to each other:

a:link { } a:LINK { } a:LiNk { } a:lInK { }

Spacing Characters Before and After Pseudo-class Names

There can’t be any spacing characters before and/or after the colon (:) preceding the pseudo-class name. For instance, writing your style rule as such won’t properly render in browsers:

/* Spaces before and after the colon (:) won't work */ a : link { color: green; } /* Spaces before the colon (:) won't work */ a :link { color: green; } /* Spaces after the colon (:) won't work */ a: link { color: green; }

Link Pseudo-classes in Modern Browsers

In modern web browsers, :link and :visited will behave differently from other pseudo-classes in order to protect the privacy of a visitor’s browsing history. Modern browsers now limit the CSS properties that will be rendered in style rules that involve the :link and :visited pseudo-classes.

In short, the style rules for :link and :visited cannot differ except for their color properties. For instance, you can’t assign them different background-image values or give them different display values. In modern browsers, the following example will not behave as you’d expect.

Visited links will not render in all-caps; they will be in all-lowercase just like unvisited links.

HTML

<a href="#unvisited">Unvisited LINK</a> <a href="#visited">Visited LINK</a>

CSS

/* Unvisited links are told to render in all-lowercase */ a:link { text-transform: lowercase; } /* Visited links are instructed to render in all-caps */ a:visited { text-transform: uppercase; }

Result

For a full explanation of the issue with :link and :visited pseudo-classes, read this article: Why the :visited Pseudo-class is Strange.

Related Content

• Designing the Perfect Hyperlink — It’s Not as Simple as You Think
• Designing Hyperlinks: Tips and Best Practices
• HTML5 Download Attribute Guide