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
ioutline-color
. - Els atributs SVG permesos són
fill
istroke
. - 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 és0
, 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
.
Nota: Per obtenir més informació sobre aquestes limitacions i els motius que hi ha darrere, consulteu Privadesa i el selector :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
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of ':visited' in that specification. |
Living Standard | |
Selectors Level 4 The definition of ':visited' in that specification. |
Working Draft | Cap canvi. |
Selectors Level 3 The definition of ':visited' in that specification. |
Recommendation | Cap canvi. |
CSS Level 2 (Revision 1) The definition of ':visited' in that specification. |
Recommendation | Aixeca la restricció per aplicar solament :visited a l'element <a> . Permet als navegadors restringir el seu comportament per raons de privadesa. |
CSS Level 1 The definition of ':visited' in that specification. |
Recommendation | Definició inicial. |
Navegadors compatibles
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 3.5 | 3.5 | 1.0 |
Restriccions en les propietats CSS permeses en una declaració usant :visited |
6 | (Yes) | 4.0 (2.0) | 8 (or earlier) | ? | 5.0 |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | 4.4 | (Yes) | 1.0 (1.0) | 11 | 37 | 9.3 |
Vegeu també
- Privacitat i selector :visited
- Enllaços relacionats amb les pseudo-classes:
:link
,:active
i:hover
.