Teoría
Teoría

Pseudoclases :link, :visited y :active

Dejemos un momento el biatlón para conocer las pseudoclases de los enlaces.

:link selecciona los enlaces que todavía no has visitado.
:visited selecciona los enlaces que ya has visitado.
:active selecciona los enlaces mientras los estás activando, por ejemplo, mientras mantienes presionado el botón del mouse sobre ellos.

Este es un ejemplo de reglas de CSS para los enlaces:

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Fíjate en el orden de las reglas. Si las colocas en otro orden, algunas pueden quedar anuladas por las siguientes.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Pseudoclases :link, :visited y :active</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Pseudoclases para los enlaces</h1> <p> <a href="/courses/608/run/14">Enlace a este ejercicio</a>. Su aspecto depende de si el navegador lo considera visitado.</p> <p> <a href="/never-visited">Enlace de prueba</a>. Esta dirección apunta a una página que no existe.</p> <p>Por cierto, es muy común usar :hover para cambiar el aspecto de los enlaces al pasar el puntero sobre ellos.</p> </body> </html>

CSS

ObjetivosRealizado

Asigna color: black; a los enlaces que todavía no has visitado.
Asigna color: #cccccc; a los enlaces que ya has visitado.
Asigna color: green; a los enlaces activos.

Haz clic en cualquier enlace para comprobar los selectores.