Use of Pseudo-Class :link

Question

I’m using Pseudo Class for links, I understand the concept and use of a:hover a:active and a:visited , but I can’t understand the a:link. What is the use of it? If possible I would like a practical example of this class .

Answer 1

"To pseudo-class CSS :link allows you to select the links within an element. It selects all links, even those that have not been visited, including links already stylized in other classes or ids with the :hover, :active or :visited. For proper functioning it is essential that it comes before the rules: :visited — :hover — :active. The :focus is a pseudo-class generally used before a:hover or later, depending on the expected result." Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:link

In short In most Browser the default link color is Blue. To change this you can use the :link this is the pseudo-class to customize the default link, not visited link, and this pseudo-class must come before all other pseudo-classes referring to the link.

Examples:

/* cor do link não visitado */
a:link {
    color: red;
}

/* cor do link visitado */
a:visited {
    color: green;
}

/* cor do mouse over no link */
a:hover {
    color: hotpink;
}

/* cor do link quando ativo */
a:active {
    color: blue;
}

<a href="default.asp" target="_blank">Meu link</a>
<p><b>Nota1:</b> a:hover precisa vir antes de a:link e a:visited no CSS para funcionar.</p>
<p><b>Nota2:</b> a:active precisa vir depois a:hover no CSS definition para funcionar.</p>

OBS: These are the W3C recommendations

:link { color: #0000EE; }                          /* cor azul padrão */
:visited { color: #551A8B; }                       /* cor roxa visitado */
:link:active, :visited:active { color: #FF0000; }  /* cor vermelha ativo */
:link, :visited { text-decoration: underline; cursor: pointer; }
a:link[rel~=help], a:visited[rel~=help],
area:link[rel~=help], area:visited[rel~=help] { cursor: help; }

Source: https://www.w3.org/TR/html5/rendering.html#non-replaced-Elements-phrasing-content