The :link Pseudo-class Does Match Visited Links

I was reading about CSS pseudo-classes and I came across the :link pseudo-class. Everyone says that the :link pseudo-class matches link elements that have an 'href' attribute and h

Solution 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.

Here is an example to illustrate:

a:link {
  font-size:50px;
  border:2px solid red;
  color:black;
  padding:20px;
  box-shadow:5px5px0 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 -5px0 purple;
  display:inline;
  margin:9584px;
  font-size:10px;
}

<ahref="www.something.comg">not visited</a><ahref="#">visited</a>

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;
}

<ahref="#">a link</a>

Solution 2:

The :visited psuedoselector can change many properties (e.g. color, background-color) but unfortunately font-size is not one of them. This is why it would not change your font-size even if you were setting it in your :visited code.

The reason for the restriction is for privacy reasons. You can see more about the restrictions to visited here