13. Pseudoclases y pseudoelementos en CSS

Las pseudoclases y pseudoelementos son una parte esencial de CSS, ya que permiten a los desarrolladores diseñar elementos de forma dinámica y específica. Comprender estos conceptos es vital para convertirse en un desarrollador front-end eficaz.

Pseudoclases

Las pseudoclases son palabras clave agregadas a los selectores que especifican un estado especial del elemento seleccionado. Por ejemplo, un elemento puede cambiar de estado cuando un usuario pasa el cursor sobre él, cuando es el primer hijo de su padre, cuando está vacío, etc.

Algunas de las pseudoclases más comunes incluyen:

• :hover: selecciona un elemento cuando el usuario pasa el cursor sobre él.
• :focus: selecciona un elemento cuando tiene el foco (por ejemplo, cuando un usuario hace clic en un campo de entrada de texto).
• :activo: selecciona un elemento en el momento en que el usuario lo activa.
• :visitado: selecciona enlaces que el usuario ya ha visitado.
• :first-child: selecciona el primer hijo de un elemento.
• :last-child: selecciona el último hijo de un elemento.
• :nth-child(n): selecciona el enésimo hijo de un elemento.
• :empty: selecciona elementos que no tienen hijos (incluidos los nodos de texto).

Pseudoelementos

Los pseudoelementos, por otro lado, son palabras clave agregadas a los selectores que le permiten diseñar una parte específica de un elemento seleccionado. Por ejemplo, es posible que desees darle estilo a la primera letra o la primera línea de texto, o tal vez agregar contenido antes o después de un elemento.

Algunos de los pseudoelementos más comunes incluyen:

• ::first-line: selecciona la primera línea de un bloque de texto.
• ::primera letra: selecciona la primera letra de un bloque de texto.
• ::before: inserta contenido antes del contenido de un elemento.
• ::after: inserta contenido después del contenido de un elemento.

Cómo utilizar Pseudoclases y Pseudoelementos

La sintaxis para usar pseudoclases y pseudoelementos es bastante simple. Para pseudoclases, agregue la pseudoclase directamente después del selector, precedida por dos puntos. Por ejemplo:

p: flotar {
  color de fondo: amarillo;
}

Este ejemplo selecciona todos los párrafos de la página y cambia el color de fondo a amarillo cuando el usuario pasa el cursor sobre ellos.

Para los pseudoelementos, la sintaxis es similar, pero se utilizan dos puntos en lugar de uno. Por ejemplo:

p::primera letra {
  tamaño de fuente: 200%;
  color rojo;
}

Este ejemplo selecciona la primera letra de todos los párrafos de la página y cambia su tamaño de fuente al 200% y su color a rojo.

En conclusión, las pseudoclases y pseudoelementos son herramientas poderosas para diseñar elementos HTML de forma dinámica y específica. Te permiten crear diseños más interactivos y atractivos, mejorando la experiencia del usuario en tu sitio web. Comprender y utilizar eficazmente estas técnicas es una habilidad esencial para cualquier desarrollador front-end.

Siguiente página del libro electrónico gratuito:

60Animaciones y transiciones en CSS

3 minutos