Pseudo clases CSS - link, visited, focus, hover y active

La pseudo clase más utilizada es, sin duda, la que permiten representar los diferentes estados de los hipervínculos:

/* muestra en azul los links no visitados */
a:link {
color: #006;
}

/* muestra en gris los links visitados */
a:visited {
color:#999;
}

/* muestra en rojo claro los links focalizados */
a:focus {
color: #f00;
}

/* muestra en rojo los links en hover */
a:hover {
color:#a00;
}

/* muestra en rojo claro los links activos */
a:active {
color:#f00;
}

Observe que las pseudo clases no se añaden con un punto sencillo al selector de elemento sino con dos puntos (:).

Las pseudo clases predeterminadas se pueden vincular con las clases definidas por el usuario:

a.azul:visited {
color: #006;
}

:link y :visited son pseudo clases link y sólo se pueden asignar al elemento ancla (<a>) :hover, :active y :active y :focus son pseudo clases dinámicas que, en teoría, se pueden asignar a cualquier elemento.

Con las pseudo clases para vínculos hay que tener en cuenta una particularidad, a saber, que el orden sea el correcto. Un orden adecuado de las instrucciones puede significar que un estado en particular no se evalúe nunca porque quede sobreescrito por alguno de los estados definidos a continuación.

Un orden seguro es el siguiente:

:link - :visited - :focus - :hover - :active

Las pseudo clases también se pueden combinar. En teoría, la siguiente instrucción también es posible:

a:focus:hover {…}

La instrucción se aplica cuando el vínculo está focalizado (con el teclado) y el puntero pasa sobre él.

Otra pseudo clase es la del idioma, que permite identificar un elemento en el que el idioma utilizado sea distinto al del resto del documento.

#selecccionidioma p:lang(es) {…}

La línea anterior significaría, por ejemplo, que el párrafo <p> dentro de #seleccionaIdioma se escribe en español