:visited

La  pseudo-class CSS :visited representa enllaços que l'usuari ja ha visitat. Per motius de privadesa, els estils que es poden modificar utilitzant aquest selector són molt limitats

/*  Selecciona qualsevol <a> que s'hagi visitat */
a:visited {
  color: green;
}

Els estils definits per la pseudo-class :visited seran anul·lats per qualsevol pseudo-class posterior relacionada amb l'enllaç (:link, :hover o :active) que té com a mínim la mateixa especificitat. Per donar-li un estil apropiat als enllaços, col·loqueu la regla :visited després de la regla :link però abans de :hover i :active, tal com ho defineix l'ordre LVHA: :link — :visited — :hover — :active.

Restriccions d'estil

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:

• Les propietats CSS permeses són color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color i outline-color.
• Els atributs SVG permesos són fill i stroke.
• El component alfa dels estils permesos serà ignorat. En el seu lloc, s'usarà el component alfa de l'estat no :visited de l'element, excepte quan aquest component és 0, en aquest cas l'estil establert a :visited serà ignorat completament
• Encara que aquests estils poden canviar l'aparença de colors a l'usuari final, el mètode window.getComputedStyle mentirà i sempre retornarà el valor del color no :visited.

Sintaxi

:visited

Exemple

Les propietats que d'altra manera no tindrien color o serien transparents no es poden modificar amb :visited. De les propietats que es poden establir amb aquesta pseudo-class, probablement el vostre navegador tingui un valor predeterminat només per color i column-rule-color. Per tant, si voleu modificar les altres propietats, haureu de donar-los un valor base fora del selector :visited.

HTML

<a href="#test-visited-link">Have you visited this link yet?</a><br>
<a href="">You've already visited this link.</a>

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;
}

Resultat

Especificacions

Navegadors compatibles

Vegeu també

• Privacitat i selector :visited
• Enllaços relacionats amb les pseudo-classes: :link, :active i :hover.