:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

O :visited é uma Pseudo-classe do CSS para indicar se o link em questão já foi visitado pelo usuário. Por questões de privacidade, os styles que podem ser modificados usando este seletor são muito limitados.

css

/* Seleciona qualquer <a> que poderá ser visitado */
a:visited {
  color: green;
}

Styles definidos pela pseudo-classe :visited vão ser substituidos por qualquer pseudo-classe relacionada ao link subsequente (:link, :hover, ou :active) que tenha ao menos uma especificação igual. Para estilizar links apropriadamente, garantindo assim seu funcionamento adequado, ponha a regra :visited depois da regra :link mas antes das regras :hover e :active , Pode-se definir pela ordem LVHA: :link — :visited — :hover — :active.

Restrições de Estilo

Por razões de privacidade, navegadores limitam estritamente quais estilos você pode aplicar usando esta pseudo-class, como elas podem ser usadas:

Propriedades admicíveis no CSS são:
Atributos SVG admissíveis são fill e stroke.
Os componentes alpha permitidos de estilos seram ignorados. Ao invés disso, o componente alpha do elemento de estado non-:visited será usado, exceto quando o componente é 0, no qual o estilo definido em :visited será inteiramente ignorado.
Embora esses estilos podem mudar como as cores serão mostradas ao usuário, o método window.getComputedStyle vai mentir e sempre retornar o valor da cor em non-:visited.

Nota: Para mais informações quanto a essas limitações e as razões por trás delas, veja Privacy and the :visited selector. Obs: No momento estará apenas disponível em inglês.

Syntaxe

css

a {
  background-color: white;
  border: 1px solid white;
}
a:visited {
  background-color: lightblue;
  border-color: cyan;
  color: darkblue;
}

Exemplo

Propriedades que de alguma forma não tenha cor ("color") definida, ou seja transparente, não podem ser modificadas como o :visited. Das propriedades que podem ser definidas por essa pseudo-classe, seu navegador provavelmente terá por padão valores para color e column-rule-color somente. Portanto, se você quiser modificar outras propriedades, você necessitará pré-definir os valores fora do seletor :visited.

HTML

html

<a href="#">Você já visitou este link?</a>
<br />
<a href="">Você já visitou este link.</a>

CSS

css

a {
  /* Specifica non-transparent por padrão para algumas
     propriedades, permitindo-os a serem estilizados pelo
     estado :visited */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

Resultado

Especificações

Specification
HTML # selector-visited
Selectors Level 4 # visited-pseudo

Compatibilidade com navegadores

Veja também (inglês)

Privacy and the :visited selector
Link-related pseudo-classes: :link, :active, :hover