---
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 &lt;a&gt; 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">&lt;a href="#test-visited-link"&gt;Have you visited this link yet?&lt;/a&gt;&lt;br&gt;
&lt;a href=""&gt;You've already visited this link.&lt;/a&gt;</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>