Pseudo-clases en CSS | Explicado
- ¿Qué son las pseudo-clases?
- : clase de enlace
- : clase visitada
- : Clase de ciervo
- : clase activa
- : clase de enfoque
- : clase de primer hijo
- : clase Lang
Empecemos.
¿Qué son las pseudo-clases?
Las pseudo-clases en CSS describen un estado único de un elemento HTML y, según estos estados, se pueden agregar efectos especiales a los elementos utilizando un selector de CSS junto con estas clases.
Sintaxis
Selector: pseudo-claseEl valor de la propiedad;
Hay varias pseudo-clases en CSS, sin embargo, vamos a discutir algunos importantes en este artículo.
: clase de enlace
Esta clase se usa para diseñar un enlace que aún no se haya visitado.
Ejemplo
Supongamos que desea agregar un enlace a su sitio web y darle un estilo determinado cuando el usuario aún no lo visite. Sigue el código a continuación.
Pista de Linux
En el código anterior, hemos proporcionado un enlace al atributo HREF de la etiqueta de anclaje, y utilizando la clase: Link Link le estamos dando el color verde cuando está en su estado no visitado.
Producción
El enlace se diseñó con éxito utilizando la clase: Link.
: clase visitada
Esta clase se utiliza para diseñar un enlace que el usuario ha visitado.
Ejemplo
El ejemplo a continuación demuestra el funcionamiento de: La clase visitada sigue el ejemplo a continuación.
Pista de Linux
Aquí estamos asignando el color verde al estado visitado del enlace. Significa que cuando abra el enlace, el color cambiará a verde.
Producción
Antes de visitar el enlace.
Cuando visita el enlace.
El estado visitado del enlace fue diseñado utilizando la clase visitada.
: Clase de ciervo
Esta clase se usa para diseñar un elemento cuando se presenta un cursor del mouse.
Ejemplo
Supongamos que desea resaltar un elemento cada vez que el usuario trae el mouse sobre ese elemento en particular.
Trae mouse sobre mí
En el código anterior, hemos creado un
elemento y usado la clase de ciervo para darle un color amarillo. Ahora, cada vez que trae el mouse al elemento, el color cambiará a amarillo.
Producción
La clase: Hover Funcia correctamente.
: clase activa
Esta clase se usa para diseñar un elemento cuando está activo.
Ejemplo
Supongamos que desea que un enlace cambie su color cuando se hace clic.
Pista de Linux
Ahora, cuando el usuario haga clic en el enlace, en ese momento el color del enlace cambiará a rosa.
Producción
Antes de hacer clic en el enlace.
Cuando se hace clic en el enlace.
El estado activo del enlace se diseñó con éxito.
: clase de enfoque
Esta clase se usa para diseñar un elemento cuando está en foco.
Ejemplo
Diseñemos un campo de entrada cambiando su color de fondo cuando un usuario se enfoca en él haciendo clic en él.
Introduzca su nombre:
Según el código anterior, cuando un usuario hace clic en el campo de entrada, su color de fondo cambiará a rosa.
Producción
El color de fondo del campo de entrada cambió con éxito.
: clase de primer hijo
Esta clase se usa para diseñar al primer hijo de un elemento especificado.
Ejemplo
Supongamos que desea aplicar la propiedad CSS solo en el primer hijo de un elemento Div. Use el siguiente código.
Este párrafo es el primer hijo del div
Este párrafo es el segundo hijo del div
En el código anterior estamos utilizando la clase: primer hijo para alinear el texto del
elemento que es el primer hijo del elemento.
Producción
La primera
El elemento estaba alineado a la derecha usando la clase de primer hijo.
: clase Lang
Esta clase se usa para especificar un idioma que se utilizará en un elemento particular. Esta clase es útil al especificar reglas para varios idiomas en un documento.
Ejemplo
En el siguiente ejemplo, estamos especificando algunas reglas para
elemento con atributo lang = "en". Estos conjuntos de reglas se aplicarán a cada
Elemento que tiene este atributo.
Este es el primer párrafo.
Éste es el segundo párrafo.
Este es el tercer párrafo.
Producción
Como puedes ver que el primero y el tercero
Elements tiene el atributo lang = "en", por lo tanto, las reglas definidas para esta clase solo se aplicarán en la primera y la tercera
elementos.
Conclusión
Las pseudo-clases describen un estado único de un elemento HTML y, según estos estados, se pueden agregar efectos especiales a los elementos. Hay muchas pseudo-clases en CSS, sin embargo, algunos de los significativos son: Clase de enlace ,: Clase Visited ,: Hover Clase ,: Clase Activa ,: Clase de Focus ,: Clase de primer hijo y: Lang Clase. Estas clases se explican en profundidad en esta publicación junto con sus ejemplos relevantes.