Obtenga más poder sobre sus diseños web utilizando estos selectores CSS avanzados.
CSS admite una variedad de selectores para identificar elementos para diseñar, cada uno con su propio conjunto de reglas. Si bien la mayoría de los métodos de selección son sencillos, las pseudoclases y pseudoelementos brindan más flexibilidad. Le permiten seleccionar elementos según su estado o posición dentro de una estructura, o seleccionan partes específicas de contenido.
Estos selectores pueden ser difíciles de usar y es fácil mezclar pseudoclases con pseudoelementos, entonces, ¿cómo se diferencian entre ellos?
Comprender las pseudoclases CSS
Una pseudoclase CSS es como una palabra clave especial que puedes usar con selectores para diseñar elementos de diferentes maneras. Estas palabras clave lo ayudan a apuntar a elementos cuando suceden ciertas cosas, como cuando un usuario pasa el mouse sobre un elemento, hace clic en él o escribe algo en un campo de entrada.
Las pseudoclases hacen que su página web sea más interactiva y receptiva al cambiar la apariencia o el comportamiento de los elementos en función de las acciones del usuario. Cuando usted
Úselos con otros selectores CSS, proporcionan un control preciso sobre el estilo y la interactividad.Sintaxis y uso de pseudoclases CSS
La sintaxis de una pseudoclase CSS consta de dos puntos (:) seguido del nombre de una pseudoclase. Aquí está la sintaxis básica:
selector:pseudo-class {
/* styles */
}
En esta sintaxis:
- selector se refiere al elemento o elementos que desea seleccionar y aplicar estilos. Puede ser un elemento HTML, una clase, un ID o un selector más complejo como una combinación. El selector es opcional, pero normalmente usarás uno; sin él, su pseudoclase apuntará a todos los elementos a los que pueda aplicarse.
- pseudoclase es la palabra clave que representa un estado o condición específica a la que desea dirigirse.
CSS clasifica las pseudoclases en varios grupos según su funcionalidad y las condiciones a las que se dirigen. Aquí están las categorías principales junto con algunos ejemplos:
La interacción del usuario | |
---|---|
:flotar |
Selecciona un elemento cuando el puntero del mouse pasa sobre él. |
:activo |
Selecciona un elemento cuando un usuario lo activa, normalmente haciendo clic. |
:visitado |
Selecciona enlaces que el usuario ha visitado. |
Estructural | |
:primer hijo |
Selecciona el primer elemento hijo de un padre. |
:último niño |
Selecciona el último elemento hijo de un padre. |
: enésimo hijo (n) |
Selecciona elementos según su posición dentro de un padre, lo que le permite apuntar a niños específicos. |
Relacionado con el formulario | |
:desactivado |
Selecciona elementos de formulario deshabilitados. |
:comprobado |
Selecciona botones de radio marcados o casillas de verificación. |
Estado del elemento de la interfaz de usuario | |
:inválido |
Selecciona elementos de formulario no válidos. |
:requerido |
Selecciona los campos obligatorios de los elementos del formulario. |
:opcional |
Selecciona elementos del formulario que son campos opcionales. |
Relacionado con enlaces | |
:enlace |
Selecciona enlaces no visitados. |
Basado en el lenguaje | |
:idioma() |
Selecciona elementos según el idioma especificado en su atributo "lang". |
Puedes probar un ejemplo común aplicar :efectos de desplazamiento a las imágenes en una galería. Los estilos típicos incluyen ampliar o atenuar estas imágenes cuando alguien pasa el cursor sobre ellas.
Explorando pseudoelementos CSS
Un pseudoelemento CSS es como una palabra clave especial que puedes usar con selectores para diseñar partes específicas del contenido de un elemento o para insertar contenido adicional. Estas palabras clave le permiten orientar y diseñar elementos según su estructura de contenido.
Pseudoelementos mejorar el diseño y la disposición de su página web brindándole la posibilidad de diseñar elementos de formas que tradicionalmente solo eran posibles con elementos HTML reales.
Sintaxis e implementación de pseudoelementos CSS
Los pseudoelementos en CSS tienen una sintaxis específica que implica el uso de dos dos puntos (::) seguido del nombre del pseudoelemento. Aquí está la sintaxis básica:
selector::pseudo-element {
/* styles */
}
En esta sintaxis:
- selector apunta al elemento al que desea aplicar el pseudoelemento. Puede ser cualquier selector CSS válido, incluido ninguno.
- pseudoelemento es el nombre del pseudoelemento al que desea dirigirse. Sólo puedes usar un pseudoelemento en un selector ya que realmente no tienen sentido en combinación.
Éstos son algunos de los pseudoelementos:
::antes |
Inserta contenido antes del contenido del elemento seleccionado. |
::después |
Inserta contenido después del contenido del elemento seleccionado. |
::primera letra |
Da estilo a la primera letra del texto dentro de un elemento. |
::selección |
Da estilo a la porción de texto que un usuario ha seleccionado con el cursor. |
::marcador |
Da estilo al cuadro de marcador de un elemento de lista (por ejemplo, la viñeta o el número en una lista). |
::señal |
Aplica estilos a señales en elementos multimedia como |
El ::antes y ::después de pseudoelementos Puede ser particularmente complicado de entender, por lo que practicarlos te ayudará a dominar el resto.
Similitudes y diferencias
Estas son las similitudes y diferencias entre las pseudoclases y los pseudoelementos de CSS:
Pseudoclases |
Pseudoelementos |
|
---|---|---|
Sintaxis |
Con el prefijo dos puntos (:). |
Con el prefijo dos dos puntos (::). |
Uso |
Seleccione y diseñe elementos según su estado, posición o interacción del usuario. |
Diseñe partes específicas del contenido de un elemento o cree elementos virtuales. |
Selectores |
Puede ocurrir en cualquier punto dentro de un selector complejo o compuesto. |
Debe ser el componente final de un selector y solo puede aparecer una vez. |
Inserción de contenido |
No inserta contenido, principalmente para aplicar estilos según el estado. |
Puede insertar contenido o elementos virtuales antes o después del contenido del elemento seleccionado. |
Estilo tipográfico |
Normalmente no se utiliza para estilos tipográficos. |
Se utiliza para texto y estilo tipográfico (por ejemplo, ::primera línea, ::primera letra). |
Piezas específicas |
Se dirige a elementos completos. |
Se dirige a partes específicas del contenido de un elemento. |
Soporte del navegador |
Generalmente bien respaldado. |
Generalmente tiene buen soporte, pero algunos navegadores más antiguos pueden tener soporte limitado. |
Las pseudoclases y los pseudoelementos son importantes en CSS para crear varios estilos y funciones interactivas. Si bien tienen algunas similitudes, cada uno tiene sus propias funciones únicas en el diseño y desarrollo web.
Pseudoclases y pseudoelementos en acción
Puede practicar el uso de pseudoclases y pseudoelementos de CSS en diferentes proyectos para evaluar su comprensión. Ejemplos de proyectos sencillos que puede realizar incluyen tarjetas de perfil, menús de navegación y estilos de listas, entre otros. Estos proyectos brindan experiencia práctica para mejorar sus habilidades de CSS al tiempo que incorporan interactividad y estilo en sus diseños web.