:link, :visited, :hover y :active
Las pseudo clases :link, :visited, :hover y :active son de las primeras pseudo clases implementadas en CSS.
La pseudo clase :link
La pseudo clase :link se utiliza para seleccionar y dar estilo a los enlaces que no fueron visitados. Importante: la pseudo clase :link selecciona solo a los elementos <a> que tienen un atributo href.
<!-- :link selecciona este elemento --> <a href="http://w3.unpocodetodo.info">unpocodetodo.info</a> <!-- :link no selecciona este elemento --> <a>No hay atributo hrefe</a>
La pseudo clase ::visited
La pseudo clase ::visited se utiliza para seleccionar y dar estilo a los enlaces que ya fueron visitados.
a:visited {
color:#0f0;
}La pseudo clase ::hover
La pseudo clase ::hover se utiliza para seleccionar y dar estilo al pasar con el ratón por encima de un elemento, y se utiliza normalmente para enlaces <a> pero puede ser utilizada también para otros elementos.
img:hover {
transform: scale(1.5);
}La pseudo clase :active
La pseudo clase :active especifica y selecciona un elemento activo, y se utiliza normalmente para enlaces <a> pero puede ser utilizada para otros elementos. Decimos que el elemento es activo cuando el usuario hace clic en este elemento pero antes de levantar el dedo del botón del ratón: o sea en "mousedown".
p:active {
color: #f00;
}Cuando utilizamos la pseudo clase :active para un enlace, la utilizamos junto con :link, :visited, y :hover.
Hay que tener en cuenta que un elemento puede recibir estilos de dos pseudo clases a la vez: :visited y :active o :link y :active. Para no sobreescribir los estilos, cuando utilizamos las cuatro pseudo clases mencionadas arriba, normalmente las ponemos en el siguiente orden:
a:link {
/* estilos */
}
a:visited {
/* estilos */
}
a:hover {
/* estilos */
}
a:active {
/* estilos */
}