09.03.2025

Desativando a Mudança de Cor para Links Visitados em HTML e CSS

Resposta Rápida

Se você precisa evitar a mudança de cor para links visitados, atribua os mesmos estilos às pseudo-classes :link e :visited:

a:link, a:visited {
    color: blue; /* A cor do link sempre será azul */
}

Esse seletor define a cor do link como azul, independentemente de seu status de visitação.

Importância da Ordem das Pseudo-Classes

A ordem das pseudo-classes para hyperlinks é crucial para um estilo correto em CSS. Lembre-se do acrônimo — LoVe/HAte (link, visitado, hover, ativo). Juntas, elas formam esta ordem:

a:link {}    /* Amor à primeira clicada */
a:visited {} /* Já conhecido */
a:hover {}   /* Atração em seu pico */
a:active {}  /* Relacionamentos se tornam mais ativos */

Se você quiser que a cor dos links visitados permaneça inalterada, simplesmente não especifique uma cor para :visited:

a:link, a:hover, a:active {
    color: black; /* Clássico em traje preto */
}

Garantindo Consistência

Para manter uma interface de usuário consistente, use a propriedade inherit. Isso garante que as cores dos links corresponderão à cor de seu elemento pai:

a, a:visited, a:hover, a:active {
    color: inherit; /* Estabilidade e tradição */
}

Visualização

Para visualizar hyperlinks, imagine-os como portas (🚪):

Antes de visitar: 🚪🔵 (Porta azul não visitada)
Depois de visitar: 🚪🔴 (Porta vermelha visitada)

Vamos parar a mudança de cor com o seguinte seletor:

a:visited { color: inherit; }

Agora:

Sempre: 🚪🔵 (A porta sempre permanece azul)

Usar color: inherit; para :visited mantém a cor da porta constante após a passagem.

Abordagem com Cor Padrão do Navegador

Se você quer usar a cor do sistema sem especificar um valor, utilize cores do sistema:

a:visited { color: LinkText; } /* O navegador sabe o que é melhor */

Nota: Algumas cores do sistema, como LinkText, podem não ser suportadas por alguns navegadores. Sempre verifique a compatibilidade durante o uso.

Sass e @extend

No Sass, você pode usar @extend para evitar duplicação de código. No entanto, faça isso com cuidado para evitar um aumento no tamanho do seu arquivo CSS:

a:visited { 
    @extend .regular-link; /* O princípio DRY em ação, atenção à sua adesão */
}

Use @extend com sabedoria para manter um equilíbrio ideal entre a facilidade de manutenção do código e o desempenho.

Recursos Úteis

1. :visited | CSS-Tricks - CSS-Tricks — Um guia abrangente sobre o uso da pseudo-classe :visited.
2. :visited - CSS: Estilos de Página | MDN — Documentação oficial para a pseudo-classe :visited da MDN.
3. Seletor CSS :visited — Um guia sobre o uso do seletor :visited.
4. Seletores Nível 3 — Informações detalhadas sobre a especificação de seletores CSS do W3C, incluindo :visited.
5. Seletores CSS3 | Can I use... Tabelas de suporte para HTML5, CSS3, etc — Tabelas de compatibilidade para seletores CSS com navegadores, incluindo a pseudo-classe :visited.
6. O Guia Definitivo Para Estilizar Links Com CSS — Smashing Magazine — Melhores práticas para estilização de hyperlinks, incluindo :visited.
7. Mudanças relacionadas à privacidade chegando ao CSS :visited - Mozilla Hacks - o blog dos desenvolvedores web — Discussão sobre questões de privacidade e mudanças no processamento da pseudo-classe :visited pelos navegadores.

Video

Navigation