W3docs
pt
Entrar

CSS :visited Pseudo Class

A pseudo-classe :visited do CSS seleciona e estiliza links já visitados. Leia sobre ela e pratique com exemplos.

A pseudo-classe :visited seleciona links (elementos <a> com href) que o usuário já visitou. Use-a para dar aos links visitados uma aparência diferente dos não visitados — uma dica clássica de UX que indica ao leitor quais páginas ele já abriu.

Esta página explica o que :visited seleciona, os limites rígidos (e incomuns) que os navegadores impõem ao que pode ser estilizado com ela, por que esses limites existem e como combiná-la com os outros estados de link na ordem correta.

a:visited {
  color: #8ebf42;
}

Como funciona

Um link é considerado "visitado" quando o URL de destino está no histórico do navegador. O navegador aplica os estilos de :visited automaticamente — não há JavaScript nem marcação envolvidos. Assim que o usuário clica (ou já visitou o URL antes), o link correspondente muda para o estilo de visitado.

Apenas elementos <a> com o atributo href podem corresponder a :visited. Uma âncora sem href (por exemplo, <a>text</a>) é tratada como um espaço reservado e nunca corresponde a :link ou :visited.

Por que só é possível estilizar algumas propriedades

Historicamente, :visited podia alterar quase qualquer propriedade. Isso acabou sendo uma grave falha de privacidade: uma página poderia dispor milhares de links fora da tela e usar getComputedStyle (ou efeitos colaterais de layout) para detectar quais eram renderizados como "visitados" — efetivamente lendo partes do histórico de navegação do usuário sem permissão.

Para fechar essa brecha, os navegadores modernos restringiram :visited a propriedades somente de cor e mentem sobre o estilo calculado para que scripts não consigam detectar a diferença. É por isso que definir algo como uma background-image ou alterar o tamanho do elemento em :visited silenciosamente não faz nada.

As propriedades que os navegadores ainda permitem em :visited:

Duas regras extras tornam isso seguro:

  • A mudança deve vir diretamente de :visited; não é possível, por exemplo, tornar o link transparente em :link e revelar um fundo apenas em :visited.
  • Não é possível usar rgba()/hsla() com transparência parcial para vazar o estado, e o canal alfa é efetivamente ignorado.

Se você precisar de uma estilização mais rica que dependa do estado do link, aplique-a a um estado que não seja :visited — como :link, :hover ou :focus.

A ordem LVHA

Ao estilizar os quatro estados de link, a ordem das regras importa por causa de empates de especificidade CSS. A convenção é Link, Visited, Hover, Active (lembrada como "LoVe HAte"):

a:link    { color: #1c87c9; }  /* unvisited */
a:visited { color: #8ebf42; }  /* visited   */
a:hover   { color: #666666; }  /* mouse over */
a:active  { color: #cc0000; }  /* being clicked */

Se você colocar :hover antes de :visited, um link visitado nunca mostrará sua cor de hover, porque a regra :visited posterior, com a mesma especificidade, venceria.

Versão

Selectors Level 4

Selectors Level 3

Sintaxe

Sintaxe CSS :visited

:visited {
  css declarations;
}

Exemplo do seletor :visited:

Exemplo de código CSS :visited

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        padding: 5px;
      }
      a:visited {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <a href="https://www.w3docs.com">W3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>
Experimente Você Mesmo »

Exemplo de código :visited

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 20px;
      }
      /* unvisited link */
      a:link {
        color: #cccccc;
      }
      /* visited link */
      a:visited {
        color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
        color: #8ebf42;
      }
      /* selected link */
      a:active {
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>:visited selector example</h2>
    <p>Visit our
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>
Experimente Você Mesmo »

Seletores relacionados

  • :link — estiliza links que ainda não foram visitados.
  • text-decoration — frequentemente combinado com estados de link para adicionar ou remover sublinhados.

Prática

Prática
O que o seletor :visited faz em CSS?
O que o seletor :visited faz em CSS?
Was this page helpful?