Chuck's Academy

Selectores CSS

Selectores de Pseudoclases

Imagina que estás diseñando un menú de navegación y quieres que el enlace del menú cambie de color cuando un usuario pasa el cursor sobre él. O quizás deseas dar un estilo diferente al primer párrafo de cada sección para destacarlo. Las pseudoclases hacen todo esto posible, permitiendo seleccionar elementos HTML en base a su estado o relación con otros elementos.

¿Qué son las Pseudoclases?

Una pseudoclase es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover se puede aplicar a un enlace que el usuario está apuntando con el cursor.

Ejemplo de :hover

Vamos a hacer que los enlaces se vuelvan verdes cuando el usuario pase el cursor sobre ellos.

Pseudoclases Comunes y su Compatibilidad

Además de :hover, hay muchas otras pseudoclases que puedes utilizar para diseñar tu página web de manera más interactiva y accesible. Aquí te listamos algunas de las más comunes que son compatibles con la mayoría de los navegadores modernos:

  • :first-child: selecciona el primer hijo de un elemento.
  • :last-child: selecciona el último hijo de un elemento.
  • :nth-child(n): selecciona el hijo n-ésimo de un elemento.
  • :nth-last-child(n): selecciona el hijo n-ésimo empezando desde el final.
  • :not(selector): selecciona todos los elementos que no coinciden con el selector.
  • :checked: selecciona los elementos de formulario que están marcados o seleccionados.
  • :focus: selecciona el elemento que tiene el foco.
  • :disabled: selecciona los elementos de formulario que están deshabilitados.
  • :enabled: selecciona los elementos de formulario que están habilitados.

Ejemplo de :first-child

Para dar un estilo especial al primer elemento de cualquier contenedor, podemos usar la pseudoclase :first-child.

Ejemplo de :last-child

De manera similar, si quieres dar un estilo al último elemento, puedes usar :last-child.

Conclusión

Las pseudoclases nos permiten aplicar estilos a elementos en base a su estado, lo que nos da un gran poder para crear interfaces de usuario dinámicas y reactivas. Explorando y utilizando estas herramientas, puedes mejorar significativamente la experiencia de usuario de tus sitios web.

En el próximo tema, abordaremos los selectores de pseudoelementos, que nos permiten estilizar partes específicas de los elementos para crear diseños aún más refinados.


Pregúntame lo que sea