:link CSS Pseudo Class
Description
The :link
pseudo-class is a CSS selector that targets hyperlinks (anchor elements <a>
) in their default, unvisited state. When you apply styles using :link
, they affect links that the user has not yet clicked on or interacted with.
Typically, web designers use the :link
pseudo-class to define the initial appearance of links, such as setting their text color, underlines, and other visual properties. For example, you can change the color of unvisited links like this:
a:link {
color: blue;
text-decoration: underline;
}
In this example, all unvisited links on the webpage will appear in blue with underlines.
Once a user clicks on a link and visits the linked page, it transitions to the
:visited
state, and styles defined for :visited
take precedence. The :link
pseudo-class allows web developers to differentiate between unvisited and visited links, making it easier to provide visual cues to users about their browsing history.
Syntax
:link { /* ... */ }
Example
<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>
a:link {
background-color: gold;
color: green;
}
Browser Support
The following table will show you the current browser support for the CSS :link
pseudo class.
Desktop | |||||
12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
18 | 4 | 14 | 3.2 | 1 | 1.5 |
Last updated by CSSPortal on: 1st October 2023