Pseudo-clases y enlaces

¿Quién no ha visto un código como este?:

<a href="URL_pagina">Vínculo</a>

Todo enlace, tiene dos estados básicos posibles: visitado y no-visitado. Por defecto, en IE, los enlaces sin visitar se ven de color azul y los visitados morados. En Firefox, ambos se ven en azul.

Mediante las llamadas pseudo-clases de CSS podemos "controlar" la forma en que se verán:

a { text-decoration:none; } /* etiqueta genérica */
a:link { color: red; } /* pseudo-clase enlaces no-visitados */
a:visited { color: yellow; } /* pseudo-clase enlaces visitados */

En este caso, utilizamos :link para mostrar los enlaces en color rojo y con :visited ponemos los enlaces visitados de color amarillo.

También podríamos no hacer diferencia entre ambos tipos y mostrarlos siempre del mismo color:

a:link, a:visited { color: red; }

Pero los enlaces poseen más pseudo-clases que podemos utilizar y que funcionan de acuerdo a lo que el usuario haga.

:hover para detectar si el usuario coloca el puntero del ratón sobre el vínculo
:active para detectar si el usuario hace click sobre el vínculo

Estas pseudo-clases no son excluyentes entre si, un elemento puede tener ambos estados simultáneamente, de hecho, cuando hacemos click (:active), el puntero del ratón está sobre el vínculo (:hover). Por este motivo, hay un orden en que deben ser definidas ya que siempre se aplicará la última propiedad especificada.

El orden lógico si establecemos propiedades diferentes para todas es, primero :hover y luego :active. Por ejemplo:

a { text-decoration:none; }
a:link { color: red; }
a:visited { color: yellow; }
a:hover { color: green; }
a:active { color: blue; }

Por lo general, no utilizamos semejante colorinche por lo que, difícilmente nos interese ese orden y sea suficiente establecer dos estados posible, un enlace "normal" y :hover. Así que podemos simplificar todo de la siguiente manera:

a, a:link, a:visited, a:active { text-decoration:none; color: red; }
a:hover { color: yellow; }

Una pseudo-clase nos permiten distinguir entre los diferentes tipos de etiquetas en función de alguna de sus características. Un pseudo-elemento es algo que se ve en la página pero que no es parte de ella.

leer artículo actualizado