:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La pseudo-clase :visited de CSS representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.

css

/* Selecciona cualquier <a> que ha sido visitado */
a:visited {
  color: green;
}

Los estilos definidos por la pseudo-clase :visited serán anulados por cualquier pseudo-clase posterior relacionada con el enlace (:link, :hover o :active) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :visited después de la regla :link pero antes de las reglas :hover y :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.

Restricciones de estilo

Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:

Las propiedades CSS permitidas son color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, y outline-color.
Los atributos SVG permitidos son fill y stroke.
El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-:visited del elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en :visited se ignorará por completo.
Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método window.getComputedStyle mentirá y siempre devolverá el valor del color non-:visited.

Nota: Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea Privacidad y el selector :visited.

Sintaxis

Error: could not find syntax for this item

Ejemplo

Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con :visited. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para color y column-rule-color. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector :visited.

HTML

html

<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br />
<a href="">Ya has visitado este enlace.</a>

CSS

css

a {
  /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
     lo que les permite ser diseñado con el estado :visited */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

Resultado

Especificaciones

Specification
HTML Standard # selector-visited
Selectors Level 4 # link

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Privacidad y el selector :visited
pseudo-clases relacionadas con enlaces: :link, :active, :hover