CSS (hojas de estilo en cascada)
6. CSS avanzados
6.1. Pseudoclases
Las pseudoclases hacen referencia al estado de un elemento en un momento determinado.
Entenderemos esto mejor con un ejemplo:
Sabemos hacer que los enlaces de nuestra página sean de color azul:
a{
color:blue;
}
¿Pero sabríamos hacer que al pasar por encima fuesen de otro color? Podemos hacerlo gracias a las pseudoclases.
Las más habituales, y las únicas que mencionaremos en este curso, son las que hacen referencia a los enlaces:
- a:link {atributos} Enlaces.
- a:visited {atributos} Enlaces visitados.
- a:active {atributos} Enlaces activos (lo están en el preciso momento en que se pincha sobre ellos).
- a:hover {atributos} Los enlaces al pasar sobre ellos.
- a:focus {atributos} Los enlaces cuando el foco está sobre ellos (navegando utilizando el teclado podemos tener el foco en un enlace aunque el ratón no esté sobre él).
Si queremos que los enlaces de nuestra web sean rojos y que se subrayen al pasar sobre ellos podemos hacer:
a {
color:red;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}El resultado: