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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: ':visited'
slug: 'Web/CSS/:visited'
tags:
- CSS
- Layout
- NeedsMobileBrowserCompatibility
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:visited'
---
<div>{{ CSSRef }}</div>
<p>La <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:visited</code></strong> <span id="result_box" lang="ca"><span>representa enllaços que l'usuari ja ha visitat.</span> <span>Per motius de privadesa, els estils que es poden modificar utilitzant aquest selector són molt limitats</span></span></p>
<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona qualsevol <a> que s'hagi visitat</span></span> */
a:visited {
color: green;
}</pre>
<p>Els estils definits per la pseudo-class <code>:visited</code> seran anul·lats per qualsevol pseudo-class posterior relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que té com a mínim la mateixa especificitat. Per donar-li un estil apropiat als enllaços, col·loqueu la regla <code>:visited</code> després de la regla <code>:link</code> però abans de <code>:hover</code> i <code>:active</code>, tal com ho defineix l'<em>ordre</em> <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<h2 id="Restriccions_d'estil">Restriccions d'estil</h2>
<p>Per motius de privadesa, els navegadors limiten estrictament quins són els estils que es podem aplicar mitjançant aquesta pseudo-class, i com es poden utilitzar:</p>
<ul>
<li>Les propietats CSS permeses són {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }} i {{ cssxref("outline-color") }}.</li>
<li>Els atributs SVG permesos són {{SVGAttr("fill")}} i {{SVGAttr("stroke")}}.</li>
<li>El component alfa dels estils permesos serà ignorat. En el seu lloc, s'usarà el component alfa de l'estat no <code>:visited</code> de l'element, excepte quan aquest component és <code>0</code>, en aquest cas l'estil establert a <code>:visited</code> serà ignorat completament</li>
<li>Encara que aquests estils poden canviar l'aparença de colors a l'usuari final, el mètode {{domxref ("window.getComputedStyle")}} mentirà i sempre retornarà el valor del color no <code>:visited</code>.</li>
</ul>
<div class="note">
<p><strong>Nota:</strong> Per obtenir més informació sobre aquestes limitacions i els motius que hi ha darrere, consulteu <a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privadesa i el selector :visited</a>.</p>
</div>
<h2 id="Sintaxi">Sintaxi</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemple">Exemple</h2>
<p>Les propietats que d'altra manera no tindrien color o serien transparents no es poden modificar amb <code>:visited</code>. De les propietats que es poden establir amb aquesta pseudo-class, probablement el vostre navegador tingui un valor predeterminat només per <code>color</code> i <code>column-rule-color</code>. Per tant, si voleu modificar les altres propietats, haureu de donar-los un valor base fora del selector <code>:visited</code>.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><a href="#test-visited-link">Have you visited this link yet?</a><br>
<a href="">You've already visited this link.</a></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">a {
/* Specify non-transparent defaults to certain properties,
allowing them to be styled with the :visited state */
background-color: white;
border: 1px solid white;
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}</pre>
<h3 id="Resultat">Resultat</h3>
<p>{{EmbedLiveSample("Example")}}</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</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>Cap canvi.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Cap canvi.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Aixeca la restricció per aplicar solament <code>:visited</code> a l'element {{HTMLElement ("a")}}. Permet als navegadors restringir el seu comportament per raons de privadesa.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Definició inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("1.0") }}</td>
<td>3.5</td>
<td>3.5</td>
<td>1.0</td>
</tr>
<tr>
<td>Restriccions en les propietats CSS permeses en una declaració usant <code>:visited</code></td>
<td>6</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2.0") }}</td>
<td>8 (or earlier)</td>
<td>{{ CompatUnknown() }}</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>4.4</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>11</td>
<td>37</td>
<td>9.3</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacitat i selector :visited</a></li>
<li>Enllaços relacionats amb les pseudo-classes: {{cssxref(":link")}}, {{cssxref(":active")}} i {{cssxref(":hover")}}.</li>
</ul>
|
