:visited
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
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.
/* 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, youtline-color. - Los atributos SVG permitidos son
fillystroke. - El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-
:visiteddel elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en:visitedse ignorará por completo. - Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método
window.getComputedStylementirá 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 itemEjemplo
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
<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br />
<a href="">Ya has visitado este enlace.</a>
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 # selector-visited |
| Selectors Level 4 # visited-pseudo |
Compatibilidad con navegadores
Loading…
Ver también
- Privacidad y el selector :visited
- pseudo-clases relacionadas con enlaces:
:link,:active,:hover