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 */
}
0 Comentarios