Pseudo-Clases
Se tratan de estilos CSS que se activan en base a los elementos que se desencadenen debido a la interacción del usuario, en su son muy similares a los pseudo-elementos, por supuesto con ciertas diferencias, Las diferentes pseudo-clases son:
Nota: Las pseudo clases se indican, con el selector del elemento seguido de dos puntos (:) y del nombre de la pseudo-clase
:hover
-
Se acciona cuando el ratón se encuentra encima del elemento en cuestión, ese es el desencadenante de esta pseudo-clase, por lo tanto al cumplirse esta condición el elemento cambiará de estilos:
Ejemplo
Código
Elemento en Reposo
Se Acciona el Evento
Nota: Esta pseudo-clase se puede emplear en cualquier elemento a excepción de los pseudo-elementos.
Nota: En pantallas táctiles este evento funciona cuando se cliquea, ya que no es posible pasar el ratón por los elementos.
:link y :visited
-
En esta ocasión se tratan de dos pseudo-clases complementarias entre sí, la función de ambas consiste en modificar los estilos de una etiqueta "a", diferenciándose en que:
:link: Se activa cuando el elemento "a" posee un link que nunca haya sido visitado por el usuario, y a su vez se desactiva una vez este visita la página por primera vez
:visited: En este caso se activa cuando el elemento "a" posee un link que ya ha sido visitado con anterioridad por el usuario, y de aquí en más siempre se visualizará esta pseudo-clase mientras un registro de alguna visita a dicha dirección exista
En otras palabras "link" nos permite definir los estilos de aquellos enlaces en los que el usuario no haya accedido, mientras que "visited" nos permite aplicar otros estilos una vez esta dirección es visitada.
Nota: Sobra decir que estas pseudo-clases únicamente funcionan sobre elementos "a".
Nota: Una particularidad de estas dos pseudo-clases es que si se aplica ciertos atributos en una de ellas puede que estos también se manifiesten en la otra, tal y como ocurre con padding, por que existe cierta relación entre estas.
Ejemplos
:link
:visited
:active
-
En este caso la pseudo-clase se activa en los momentos que se mantenga el clic sobre el elemento, de ese modo estando inactiva antes y después de que se realice el clic.
Nota: Esta pseudo-clase funciona en todos los elementos.
Ejemplo
Código
Elemento en Reposo
Evento activo (manteniendo el clic)
:lang()
-
Esta pseudo-clase no es accionada en sí por ningún evento, en su lugar es una función en la que se puede aplicar estilos a un elemento en base al lenguaje en el que este se encuentre, para esto se hace lo siguiente:
-
Se define el lenguaje del elemento HTML, esto se hace usando el atributo lang dentro de este
-
Luego se define la pseudo-clase en CSS, ingresando el lenguaje al que se le aplicará el estilo
Resultado
Nota: Esto funciona similar a un selector de atributo.
Nota: Actualmente el uso de lang es bastante bajo.
Extra:
En CSS también es posible modificar los estilos de un elemento o clase cuando se desencadena un evento en otro, en CSS este tipo de declaración se aplica de la siguiente forma:
En este ejemplo se declara que cuando el ratón se posicione encima del elemento con la clase .nav_li se modifiquen los estilos del elemento "a".