CSS - Pseudo-class :link Property

Quiz

The CSS pseudo-class selector :link matches or represents an element that has not been visited yet, i.e., all the <a> and <area> elements, with href attribute or even with an empty href attribute.

All the styles specified by the pseudo-classes :link and :visited gets overridden by any subsequent interactive pseudo-classes, such as :hover or :active.
In order to style the links correctly, you need to place the :link rule before all other link-related rules.
You need to follow the LVHA rule, i.e., :link, :visited, :hover and :active.
The pseuso-classes :visited and :link are mutually exclusive.

To select an element independent of whether it has been visited or not, use the pseudo-class :any-link.

:link {
   /* ... */ 
}

CSS :link Example

Here is an example of :link pseudo-class. Here we see use of :link pseudo-class on anchor element, with background-color as lightyellow, that is not yet visited.

<html>
<head>
<style>
   a {
      font-size: 1em;
      padding: 5px;
      display: inline-block;
      margin-right: 10px;
   }

   a:link {
      background-color: lightyellow;
   }
</style>
</head>
<body>
   <h2>:link selector example</h2>
   <strong><a href="#">Tutorialspoint</a></strong>
   <strong><a href="#">Google</a></strong>
</body>
</html>

Here is an example of :link pseudo-class, along with :hover pseudo-class. Hover over the anchor element and observe the changed background color.

<html>
<head>
<style>
   a {
      font-size: 1em;
      padding: 5px;
      display: inline-block;
      margin-right: 10px;
   }

   a:link {
      background-color: lightyellow;
   }

   a:hover {
      background-color: lightsalmon;
      color: green;
   }
</style>
</head>
<body>
   <h2>:link selector example</h2>
   <strong><a href="#">Tutorialspoint</a></strong>
   <strong><a href="#">Google</a></strong>
</body>
</html>

Print Page