Enlaces CSS

Pseudo-clases de enlace

Los navegadores web suelen mostrar enlaces no visitados de forma diferente a los visitados anteriormente.

[Sintaxis]

a:link{ Declarations }
a:visited{ Declarations }

a: link: se aplica a los enlaces que aún no se han visitado.
a: visited: se cumple una vez que el usuario ha visitado el enlace.

Pseudo-clases dinámicas

Los navegadores web interactivos a veces cambian la representación en respuesta a las acciones del usuario.

[Sintaxis]

a:hover{ Declaraciones }
a:active{ Declaraciones }

a: hover: se presenta cuando el usuario coloca el elemento sobre algún elemento, pero no necesariamente está activo.
a: active: se aplica mientras el usuario está activando un elemento.

Ejemplo

[style.css]

a:link, a:visited{
  color: #ff0000;
  text-decoration: underline;
}
a:hover, a:active{
  color: #0000ff;
  text-decoration: none;
}

[index.html]

<p>Jump to <a href="http://www.google.com/">Google</a></p>
<p>Jump to <a href="http://www.yahoo.com/">Yahoo!</a>

 

Reto

1. Cambia el color de la navegación lateral por el estado del enlace.

[style.css]

nav ul li a:link, nav ul li a:visited{
  color: #333333;
  text-decoration: none;
}
nav ul li a:active, nav ul li a:hover{
  color: #990066;
  text-decoration: none;
}

Fuente: www.w3.org