1

✨ Pseudo clases para links

Juan
vanky
5975

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 

url1

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

url1

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

url1

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

url1

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

url1

😊 Les tendría que quedar algo así:

a:link {
        color: blue;
        }
        a:visited {
        color: yellow;
        }
        a:hover {
        color: green;
        }
        a:active {
        color: purple;
        }

url1

Fuentes:
https://css-tricks.com/almanac/selectors/l/link/
https://developer.mozilla.org/es/docs/Web/CSS/:link

Escribe tu comentario
+ 2