En total podemos encontrar 4 psudo clases que nos ayudarán a customizar nuestros links, estos son :link
:visited
:hover
:active
. Es importante recordar que hay que escribirlos en cierto orden, porque algunos de ellos tienen jerarquía sobre otros. Este orden es LVHA o también conocido como LOVE HATE
L:link
O
V:visited
E
H:hover
A:active
T
E
Existe una pseudo clase llamada :link
, en pocas palabras le pone un estilo los links que no han sido visitados. Una vez estos hayan sido visitado va a cambiar al estilo predeterminado, si es que no le hemos asignado alguno antes.
-👀 La etiqueta <a>
debe tener rellleno el atributo href
o no cambirá el estilo.
/*Esto va a mostrar el link de color azul 💙*/a:link {
color: blue;
}
:visited
que te cambia el estilo de los links que ya hayas visitado./*Esto va a mostrar el link ya visitado a color rojo 💖*/a:visited {
color: red;
}
:hover
es que se explica en la clase, al pasar el cursor sobre este link su estilo cambia./*Esto va a mostrar el link de color verde al pasar el cursor sobre este 💚*/a:hover {
color: green;
}
:active
, este nos va a mostrar cierto estilo mientras apretemos el link, una vez este deje de estar apretado va a volver a su estilo predeterminado o a alguno asignado con anterioridad./*Esto va a mostrar el link de color morado al hacerle click derecho o izquierdo 💜*/a:active {
color: purple;
}
😊 Les tendría que quedar algo así:
a:link {
color: blue;
}
a:visited {
color: yellow;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
Fuentes:
https://css-tricks.com/almanac/selectors/l/link/
https://developer.mozilla.org/es/docs/Web/CSS/:link