The :link pseudo-class does match visited links

Question

I was reading about CSS pseudo-classes and I came across the :link pseudo-class.

Everyone says that the :link pseudo-class matches link element

Answer 1

It's a bit confusing but if you refer to the specification you will find:

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

This is what is happening here. The trick is to create some restrictions to avoid having a big difference between the styles of visited and unvisited links.

Technically, all the styles you will apply to a:link will also apply to a:visited unless you override them inside a:visited and you are limited to the styles that you can apply inside :visited so you cannot override everything:

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

• color
• background-color
• border-color (and its sub-properties)
• column-rule-color
• outline-color
• The color parts of the fill and stroke attributes

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword. ^ref

Here is an example to illustrate:

a:link {
  font-size:50px;
  border:2px solid red;
  color:black;
  padding:20px;
  box-shadow:5px 5px 0 blue;
  display:inline-block;
  margin:10px;
}
a:visited {
 color:red; /* this will work */
 border:5px dotted green; /* only the color will work */
 background:black; /* This will not work because we cannot change transparent to opaque value */
 
 /*All the below will not work*/
  padding:0;
  box-shadow:-5px -5px 0 purple;
  display:inline;
  margin:9584px;
  font-size:10px;
}

not visited

visited

We are only allowed to slightly change the behavior from vistied to unvisited. Basically, we are only allowed to changed some colors.

From this you can also conculde that a:link is almost¹ the same as a. The difference is that the first one will only target links with href specified

¹: a:link or :link remain more specific than a

:link {
 font-size:40px;
}
a {
 font-size:10px;
}

a link