:link is a pseudo-class used to select and style links in a page. It is important to note, though, that it will only select links <a> that have an href attribute.
<!-- will select any of these -->
<a href="#">Random Link</a>
<a href="#id">Internal Link</a>
<a href="http://codrops.com">External Link</a>
<!-- will not select this -->
<a>No href attribute</a>
Links are usually selected and styled based on their different states using one of the following pseudo-classes: :link, :visited, and :hover, and :active. Each of these pseudo-classes styles a link in a state that is specified by the pseudo-class’s name.
The :link pseudo-class applies to links that have not yet been visited.
When the four link styling pseudo-classes are used, they are preferably used in the order mentioned above. For example:
a:link {
/* style links */
}
a:visited {
/* style visited link */
}
a:hover {
/* hover styles */
}
a:active {
/* active state styles */
}
The order can be easily memorized using mnemonics, like “Last Vintage Hat Available”. You can create your own one over at spacefm.com.
This order is preferred because otherwise some state styles could override other state styles, thus making them not work as expected. For example, if you were to style the :visited state last, it would override the :hover and :active states of the link, and the :visited styles would apply regardless of whether the link is being hovered or clicked.
Also, the :link pseudo-class will select all links, even those that are already styled using any of the other three pseudo-classes. So, the styles applied using :visited will be overridden by the styles applied using :link. The way to avoid this is to use the order specified above.
Trivia & Notes
An element can be both :visited and :active (or :link and :active).
After some amount of time, the browser may choose to return a link from the :visited state to the initial :link state.
In addition to the four states mentioned, you can (read: should, for better accessibility) also style links when they are focused. To do that, the :focus pseudo-class is used. And to remember the order, you could add “fur” in between the previous sentence: “Last Vintage Fur Hat Available”.
Examples
The following example styles the links on a page in their different states. :link styles are defined first to make sure they don’t override the styles defined by other pseudo-classes.
a:link {
color: skyblue;
border-bottom: 1px solid #aaa;
}
a:visited {
color: grey;
}
a:hover {
border-bottom: 1px solid skyblue;
}
a:active {
background-color: skyblue;
color: white;
}
Live Demo
The following demo shows links targeted using :link are styled with a dark background-color. The last anchor tag has no href attribute so it won’t get the styles specified using :link.
In the demo, the styles applied to the :active state are written before those defined using :link, so the :link style will override the :active styles, and even if you click the links, their styles won’t change while they’re active. If you move the :active styles and place them after the :link styles, the background color of the links will become white while they’re clicked.
Browser Support
The :link pseudo-class is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
