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

instagram viewer
Ú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.