CSS HTML

Como mudar o estilo de links já visitados com CSS (visited)

28 de novembro de 2019

Como mudar o estilo de links já visitados com CSS (visited)

Neste artigo vamos aprender como mudar o estilo de links já visitados, com a ajuda de CSS e pseudo-classes, de uma maneira simples e rápida.

alterando estilo de links já visitados capa

Teoria de mudar o estilo de links já visitados com CSS

Sabemos que a tag <a> é utilizada para representar links num documento HTML

Porém quando o link já foi visitado, ele geralmente apresenta um estilo diferente do que escolhemos antes disso

Normalmente é um roxo escuro, que não combina muito bem com os layouts, veja:

link visitado exemplo

Antes de prosseguir, este foi o HTML utilizado no exemplo:

<a href="https://www.google.com">Link do Google</a>

Prática de mudar o estilo de links já visitados com CSS

Então temos este estilo indesejado e a cor ideal para links visitados do nosso projeto é laranja, por exemplo

Então com a pseudo-classe :visited, nós conseguimos fazer esta alteração, veja:

a:visited {
    color: orange;
}

E este é o resultado final:

link visitado exemplo 2

E este resultado foi atingido com um recurso nativo, ou seja, uma maneira bem simples e performática de estilizar links visitados

Serve o adendo para as pseudo-classes, caso você não conheça, elas podem ser uma grande mão na roda

Alteram estilos de alguns elementos que não aparecem necessariamente na DOM ou o estado deles

Como é o caso do :hover, que altera os elementos quando o ponteiro do mouse está em cima dele

Você pode encontrar uma lista completa aqui. 🙂

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Obs: Dominar ou pelo menos conhecer as pseudo-classes é uma característica que bons desenvolvedores possuem, eles conhecem as ferramentas que estão trabalhando!

Conclusão

Neste artigo vimos que para estilizar um link já visitado é necessário apenas aplicar a pseudo-classe :visited na tag <a>

Assim conseguimos aplicar qualquer estilo desejado com CSS, de uma forma bem simples e eficaz

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

 

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of