Pseudo-selectores de anclas
Los pseudo-selectores permiten seleccionar elementos de acuerdo a un "estado" o característica especial.
Los pseudo selectores tienen el siguiente formato:
a:link {...}
Notarás que el selector del ancla se crea normalmente pero luego de este se agrega dos puntos ":" y una palabra clave que define el pseudo-selector.
Las anclas en HTML permiten el uso de cuatro pseudo-selectores
- a:link
- Se aplica a los vínculos que no han sido visitados
- a:visited
- Aplica a los links que ya han sido visitados
- a:hover
- Aplica cuando el puntero del mouse está sobre el link
- a:active
- Se aplica cuando el botón del mouse está presionado sobre el link
Definir estilos para links
Para definir un estilo para tu link sólo debes crear las cuatro reglas con sus respectivos pseudo-selectores de la siguiente manera:
a:link{
font-size:20px;
color:#00ccff;
text-decoration:none;
}
a:visited {
color:#0000ff;
}
a:hover {
color: #4444ff;
text-decoration: underline;
}
a:active {
color: #ff0000;
}
Utiliza el link a continuación para revisar los estados del link
Importante
- El orden en que utilices los pseudo-selectores es importante, si ubicáramos "hover" u "active" antes de "link" o visited", aquellos ignorarían las reglas de éstos y el estilo del link no funcionaría.
- Notarás que el atributo font-weight permanece en los 4 estados a pesar de estar solo definido en el primer pseudo-selector. Esto es por la herencia, los pseudo-selectores de link heredan estilos de los anteriores. Excepto en aquellas propiedades que se cambian explícitamente.
Más información
Existe una serie pseudo-selectores o pseudo-classes que podemos utilizar, para revisar la lista completa, por favor visita este sitio: