Estou usando o Pseudo Classe para links, entendi o conceito e a utilização das a:hover
a:active
and a:visited
, porém não consigo entender o a:link
. Qual é a utilização dela? Se possível gostaria de um exemplo prático dessa classe .
1 Resposta
"A pseudo-class CSS :link
permite que você selecione os links dentro de um elemento. Ela seleciona todos os links, até mesmo os que não foram visitados, incluindo os links já estilizados em outras classes ou id
s com o :hover
, :active
ou :visited
. Para um funcionamento adequado é essencial que ela venha antes das regras: :visited
— :hover
— :active
. O :focus
é uma pseudo-class geralmente usada antes de a:hover
ou depois, dependendo do resultado esperado." Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/:link
Resumindo Na maioria dos Browser o cor do link padrão é Azul. Para mudar isso vc pode usar o :link
essa é a pseudo-classe para customizar o link padrão, link não visitado, e essa pseudo-classe deve vir antes de todos as outras pseudo-classes referentes ao link.
Exemplos:
/* 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: Essas são as recomendações da W3C
: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; }
Fonte: https://www.w3.org/TR/html5/rendering.html#non-replaced-elements-phrasing-content