✨ Pseudo clases para links

5947

Personaliza tus links 😄

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;
       }

Hay otra llamada :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;
        }

Y por último tenemos a :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;
        }