CSS :link Pseudo Classe
Aprenda como a pseudo-classe CSS :link seleciona links não visitados, por que a ordem LVHA importa e como estilizar os quatro estados de link.
A pseudo-classe :link seleciona e estiliza links não visitados — links que o usuário ainda não clicou (ou que o navegador limpou do histórico). É uma das quatro pseudo-classes de "estado de link" usadas para controlar a aparência dos links enquanto o usuário interage com eles.
Esta página explica o que :link corresponde, como difere do seletor a simples, por que a ordem das regras de link importa, quais restrições de privacidade do navegador afetam pseudo-classes relacionadas e exibe exemplos executáveis para cada estado de link.
O que :link corresponde
A pseudo-classe :link corresponde a todo elemento <a>, <area> ou <link> não visitado que possui um atributo href. Um <a> sem href não é um hiperlink e não é correspondido por :link ou :visited.
/* Style every unvisited link */
a:link {
color: #1c87c9;
text-decoration: underline;
}Um link está em exatamente um dos dois estados de histórico por vez: não visitado (:link) ou visitado (:visited). Essas duas pseudo-classes são mutuamente exclusivas — um único link nunca pode corresponder a ambas ao mesmo tempo.
:link vs o seletor a simples
Esta é uma fonte comum de confusão. A diferença está no escopo:
aseleciona todos os elementos<a>, independentemente de terem umhrefou de qual seja seu estado de histórico.a:linkseleciona apenas elementos<a>que possuem umhrefe são não visitados.
/* Applies to every <a>, including those without an href */
a {
font-family: sans-serif;
}
/* Applies only to real, unvisited hyperlinks */
a:link {
color: #1c87c9;
}Use o a simples para tipografia base que se aplica a todas as âncoras. Use a:link quando precisar direcionar apenas hiperlinks não visitados — por exemplo, para distingui-los dos visitados.
Se desejar o mesmo estilo em todos os links independentemente do estado de visita, estilize o elemento a simples em vez de a:link. Usar apenas a:link deixaria os links visitados completamente sem estilo (dependendo dos padrões do navegador), a menos que você também escreva uma regra a:visited.
A ordem LVHA: por que a ordem das regras importa
As quatro pseudo-classes de link — :link, :visited, :hover e :active — podem todas se aplicar ao mesmo elemento simultaneamente. Como compartilham a mesma especificidade (0,1,0), a última regra correspondente na fonte vence. Escrevê-las na ordem errada faz com que uma regra posterior cancele silenciosamente uma anterior.
A ordem segura e convencional é LVHA — Link, Visited, Hover, Active (mnemônico: "LoVe, HAte"):
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8ebf42; } /* already visited */
a:hover { color: #095484; } /* pointer over the link */
a:active { color: #666666; } /* being clicked */Por que esta ordem funciona:
:hovervem depois de:linke:visited, então a cor de hover é exibida independentemente de o link ter sido visitado ou não.:activevem por último, garantindo que vença durante o breve momento de um clique, mesmo que:hovertambém corresponda ao mesmo tempo.
Se você invertesse :link e :hover, a cor de :link substituiria a cor de hover em links não visitados, e o hover pareceria não ter efeito.
Por razões de privacidade, os navegadores restringem fortemente o que pode ser alterado com :visited. Apenas propriedades relacionadas a cor (color, background-color, border-color, column-rule-color, outline-color) têm efeito, e os valores computados não são expostos ao JavaScript. Isso impede que páginas detectem quais URLs um usuário visitou anteriormente. Não dependa de :visited para alterações de layout, tamanho ou conteúdo — elas silenciosamente não terão efeito.
Especificidade
:link tem uma especificidade de (0,1,0) — uma pseudo-classe. Esta é a mesma especificidade de :visited, :hover, :focus e :active, razão pela qual a ordem importa tanto (veja LVHA acima). Adicionar um seletor de tipo eleva a especificidade para (0,1,1):
/* specificity (0,1,1) — type + pseudo-class */
a:link {
color: #1c87c9;
}
/* specificity (0,2,1) — type + class + pseudo-class — wins */
a.nav-link:link {
color: #ff6600;
}Foco de teclado e acessibilidade
:link e :visited cobrem a interação com mouse e ponteiro, mas usuários de teclado navegam pelos links com a tecla Tab. Estilize também o estado :focus, para que os usuários de teclado vejam um indicador visual claro:
a:link { color: #1c87c9; }
a:visited { color: #8ebf42; }
a:hover { color: #095484; }
a:focus { outline: 2px solid #095484; outline-offset: 2px; }
a:active { color: #666666; }A cor sozinha não é suficiente para indicar um link — aproximadamente 1 em cada 12 pessoas percebe cores de forma diferente, e usuários de tela sensível ao toque nunca veem os estilos de :hover. Mantenha um sublinhado (ou outro indicador não baseado em cor, como borda ou ícone) em links dentro do texto do corpo. Consulte text-decoration para controlar sublinhados.
Sintaxe
selector:link {
/* CSS declarations */
}A forma mais comum é a:link, mas :link é válido em qualquer elemento que possa ser um hiperlink:
a:link { color: #1c87c9; }
area:link { outline: 2px dashed #1c87c9; }Exemplos
Estilização básica de link não visitado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<a href="https://www.w3docs.com">w3docs</a>
<a href="https://stackdev.io/">Stackdev</a>
</body>
</html>Todos os quatro estados de link com a ordem LVHA
Este exemplo aplica cores distintas a todos os quatro estados de link. Passe o mouse ou clique no link para ver cada estado em ação.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
}
/* unvisited link */
a:link {
color: #ccc;
}
/* visited link */
a:visited {
color: #1c87c9;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #666;
}
</style>
</head>
<body>
<h2>:link selector example</h2>
<p>Visit our
<a href="https://www.w3docs.com/">website</a>.
</p>
</body>
</html>Múltiplos estilos de link usando pseudo-classes direcionadas por classe
Cada link abaixo demonstra uma propriedade CSS diferente que pode mudar ao passar o mouse, combinada com :link e :visited para os estados padrão e visitado.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
display: block;
padding: 5px 0 10px;
font-weight: bold;
}
a.one:link { color: #ccc; }
a.one:visited { color: #095484; }
a.one:hover { color: #8ebf42; }
a.two:link { color: #ccc; }
a.two:visited { color: #095484; }
a.two:hover { font-size: 150%; }
a.three:link { color: #ccc; }
a.three:visited { color: #095484; }
a.three:hover { background: #8ebf42; }
a.four:link { color: #ccc; }
a.four:visited { color: #095484; }
a.four:hover { font-family: monospace; }
a.five:link { color: #095484; text-decoration: none; }
a.five:visited { color: #095484; text-decoration: none; }
a.five:hover { text-decoration: overline underline; }
</style>
</head>
<body>
<h2>:link selector example</h2>
<p>
<a class="one" href="#">This link changes color</a>
<a class="two" href="#">This link changes font-size</a>
<a class="three" href="#">This link changes background-color</a>
<a class="four" href="#">This link changes font-family</a>
<a class="five" href="#">This link changes text-decoration</a>
</p>
</body>
</html>Compatibilidade com navegadores
:link é suportado em todos os navegadores modernos e faz parte do CSS desde o CSS1. Não há lacunas de compatibilidade conhecidas para uso básico. As restrições de privacidade em :visited descritas acima estão em vigor desde 2010 em todos os principais navegadores.
Tópicos relacionados
:visited— estilize links que o usuário já abriu.:hover— estilize um elemento enquanto o ponteiro está sobre ele.:active— estilize um link durante o momento em que é clicado.:focus— estilize um link quando ele recebe foco do teclado.text-decoration— controle o sublinhado e outras decorações de link.color— defina a cor do texto dos links em cada estado.- A tag
<a>— o elemento HTML que:linkmais frequentemente seleciona.