1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: ':visited'
slug: 'Web/CSS/:visited'
tags:
- CSS
- Layout
- Pseudo-classes
- Web
translation_of: 'Web/CSS/:visited'
---
<div>{{ CSSRef }}</div>
<p>O <strong><code>:visited</code></strong> é uma <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">Pseudo-classe</a> do <a href="/en-US/docs/Web/CSS">CSS</a> 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.</p>
<pre class="brush: css no-line-numbers">/* Seleciona qualquer <a> que poderá ser visitado */
a:visited {
color: green;
}</pre>
<p>Styles definidos pela pseudo-classe <code>:visited</code> vão ser substituidos por qualquer pseudo-classe relacionada ao link subsequente ({{cssxref(":link")}}, {{cssxref(":hover")}}, ou {{cssxref(":active")}}) que tenha ao menos uma especificação igual. Para estilizar links apropriadamente, garantindo assim seu funcionamento adequado, ponha a regra <code>:visited</code> depois da regra <code>:link</code> mas antes das regras <code>:hover</code> e <code>:active</code> , Pode-se definir pela ordem <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<h2 id="Restrições_de_Estilo">Restrições de Estilo</h2>
<p>Por razões de privacidade, navegadores limitam estritamente quais estilos você pode aplicar usando esta pseudo-class, como elas podem ser usadas:</p>
<ul>
<li>Propriedades admicíveis no CSS são:
<ul>
<li>{{ cssxref("color") }}; </li>
<li>{{ cssxref("background-color") }};</li>
<li>{{ cssxref("border-color") }};</li>
<li>{{ cssxref("border-bottom-color") }};</li>
<li>{{ cssxref("border-left-color") }};</li>
<li> {{ cssxref("border-right-color") }};</li>
<li> {{ cssxref("border-top-color") }};</li>
<li> {{ cssxref("column-rule-color") }};</li>
<li> {{ cssxref("outline-color") }}.</li>
</ul>
</li>
<li>Atributos <a href="/pt-BR/docs/Web/SVG">SVG</a> admissíveis são {{SVGAttr("fill")}} e {{SVGAttr("stroke")}}.</li>
<li>Os componentes alpha permitidos de estilos seram ignorados. Ao invés disso, o componente alpha do elemento de estado non-<code>:visited</code> será usado, exceto quando o componente é <code>0</code>, no qual o estilo definido em <code>:visited</code> será inteiramente ignorado.</li>
<li>Embora esses estilos podem mudar como as cores serão mostradas ao usuário, o método {{domxref("window.getComputedStyle")}} vai mentir e sempre retornar o valor da cor em non-<code>:visited.</code> </li>
</ul>
<div class="note">
<p><strong>Nota:</strong> Para mais informações quanto a essas limitações e as razões por trás delas, veja <a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a>. Obs: No momento estará apenas disponível em inglês.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><!DOCTYPE html>
<html>
<head>
<title>Exemplo de uso do seletor :visited</title>
<style type="text/css">
a {
background-color: white;
border: 1px solid white; }
a:visited {
background-color: lightblue;
border-color: cyan;
color: darkblue; }
</style>
</head>
<body>
<a href="">Você já visitou este link?</a><br>
<a href="">Você já visitou este link.</a>
</body>
</html></pre>
<h2 id="Exemplo">Exemplo</h2>
<p>Propriedades que de alguma forma não tenha cor ("color") definida, ou seja transparente, não podem ser modificadas como o <code>:visited</code>. Das propriedades que podem ser definidas por essa pseudo-classe, seu navegador provavelmente terá por padão valores para <code>color</code> e <code>column-rule-color</code> somente. Portanto, se você quiser modificar outras propriedades, você necessitará pré-definir os valores fora do seletor <code>:visited</code>.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><a href="#">Você já visitou este link?</a>
<br>
<a href="">Você já visitou este link.</a></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}
</pre>
<h3 id="Resultado">Resultado</h3>
<div>{{EmbedLiveSample("Exemplo")}}</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Sem mudança.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Sem mudança.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Eleva a restrição para aplicar apenas :visited ao elemento {{HTMLElement ("a")}}. Permite que os navegadores restrinjam seu comportamento por motivos de privacidade.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("css.selectors.visited")}}</p>
<h2 id="Veja_também_(inglês)">Veja também (inglês)</h2>
<ul>
<li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a></li>
<li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li>
</ul>
|
