Enlaces: Pseudoclases

CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado. De esta forma, es posible cambiar el aspecto de un enlace cuando el usuario pasa el ratón por encima o cuando el usuario accede a ese enlace.

CSS define las siguientes cuatro pseudo-clases:

a:link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el usuario (por defecto el estilo aplicado es azul y subrayado).

a:visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente por el usuario (por defecto el estilo aplicado es color morado).

a:hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón (MOUSEOVER).

a:active, aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.

Las pseudo-clases anteriores permiten modificar completamente ese aspecto por defecto y por eso casi todas las páginas las utilizan.

El siguiente ejemplo muestra cómo ocultar el subrayado cuando el usuario pasa el ratón por encima de cualquier enlace de la página:

a:hover { text-decoration: none; }

Las pseudo-clases :link y :visited solamente están definidas para los enlaces, pero las pseudo-clases :hover y :active se definen para todos los elementos HTML.

NOTA: Internet Explorer 6 y sus versiones anteriores solamente las soportan para los enlaces.

Sintaxis de las pseudoclases

Las pseudo-clases siempre incluyen dos puntos (:) por delante de su nombre y siempre se añaden a continuación del elemento al que se aplican, sin dejar ningún espacio en blanco por delante:

/* Incorrecto: el nombre de la pseudo-clase no se puede separar de los dos
puntos iniciales */
a: visited { ... }

/* Incorrecto: la pseudo-clase siempre se añade a continuación del elemento al
que modifica */
a :visited { ... }

/* Correcto: la pseudo-clase modifica el comportamiento del elemento <a> */
a:visited { ... }

posibles colisiones de estilos

Cuando se aplican varias pseudo-clases diferentes sobre un mismo enlace, se producen colisiones entre los estilos de algunas pseudo-clases.

Si se pasa por ejemplo el ratón por encima de un enlace visitado, se aplican los estilos de las pseudo-clases :hover y :visited. Si el usuario pincha sobre un enlace no visitado, se aplican las pseudo-clases :hover, :link y :active y así sucesivamente.

Si se definen varias pseudo-clases sobre un mismo enlace, el único orden que asegura que todos los estilos de las pseudo-clases se aplican de forma coherente es el siguiente:

:link, :visited, :hover y :active.

De hecho, en muchas hojas de estilos es habitual establecer los estilos de los enlaces de la siguiente forma:

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

Ejercicio propuesto

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO