- Home
- Blog
- Web Design CSS Link Pseudo-classes
CSS Link Pseudo-classes
-
William CraigCEO & Co-Founder
-
4 minute read
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
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
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX provides digital marketing solutions with expert marketers, designers, and developers to increase visibility, conversions, and revenue. Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator


Web Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator