:visited
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.
/* 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:
-
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
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
<a href="#">Você já visitou este link?</a>
<br />
<a href="">Você já visitou este link.</a>
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 Standard # selector-visited |
Selectors Level 4 # link |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também (inglês)
- Privacy and the :visited selector
- Link-related pseudo-classes:
:link
,:active
,:hover