Clase pseudo CSS :visited
El selector :visited selecciona y estiliza los enlaces visitados en la página.
La pseudo-clase :visited se aplica cuando el usuario ha visitado el enlace.
Si intentamos agregar estilo a los enlaces visitados mediante una propiedad de estilo (por ejemplo, background-image), no funcionará en los navegadores modernos. Sin embargo, las propiedades de estilo funcionarán correctamente si utilizamos cualquier otra pseudo-clase.
Los estilos que se modifican usando este selector son muy limitados. Los navegadores permiten los siguientes estilos:
- color
- background-color
- border-color
- outline color
- column-rule-color
- las partes de color de fill y stroke
Existe una opción en los navegadores web para ignorar los estilos de las reglas para las pseudo-clases :link y :visited, ya que la pseudo-clase :visited puede ser abusada y sería posible obtener información del historial del navegador del visitante.
Versión
Sintaxis
Sintaxis de CSS :visited
:visited {
css declarations;
}Ejemplo del selector :visited:
Ejemplo de código CSS :visited
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
display: block;
padding: 5px;
}
a:visited {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:visited selector example</h2>
<a href="https://www.w3docs.com">W3docs</a>
<a href="https://stackdev.io/">Stackdev</a>
</body>
</html>Ejemplo del selector :visited con enlaces sin visitar, visitados, en hover y activos:
Ejemplo de código :visited
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
}
/* unvisited link */
a:link {
color: #cccccc;
}
/* visited link */
a:visited {
color: #1c87c9;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #666666;
}
</style>
</head>
<body>
<h2>:visited selector example</h2>
<p>Visit our
<a href="https://www.w3docs.com/">website</a>.
</p>
</body>
</html>Práctica
¿Qué hace el selector :visited en CSS?