Pseudoclases en CSS

Selectores de atributos CSS Pseudo-elementos CSS

Las pseudoclases permiten apuntar a diferentes estados de un elemento. Por ejemplo, cuando el cursor pasa sobre él, cuando recibe foco o cuando es el primer hijo de su contenedor.

¿Qué es una pseudoclase?

Las pseudoclases se indican con dos puntos (:) y apuntan a estados, posiciones o casos especiales que no se pueden alcanzar con atributos normales.

Pseudo-class	Descripción
:hover	Se aplica cuando el cursor está sobre el elemento.
:focus	Se aplica cuando el elemento (ej. un input) recibe el foco.
:nth-child()	Selecciona un hijo específico según su posición numérica.
:first-child	Selecciona el primer hijo del padre.
:last-child	Selecciona el último hijo del padre.

Pseudoclases interactivas

Estas pseudoclases permiten reaccionar a interacciones, como pasar el cursor sobre un enlace o hacer clic en un campo de texto.

En este ejemplo, un enlace cambia a rojo al pasar el cursor, mientras que un campo de texto recibe un borde verde al enfocarse.

Pseudoclases estructurales

Las pseudoclases estructurales se aplican según la posición del elemento dentro de su padre. Así es más fácil dar estilo al primero, al último o a un hijo específico.

Consejos para usar pseudoclases

Las pseudoclases facilitan el estilo basado en estados y estructuras. Aquí algunos consejos:

Usa :hover y :focus para mejorar la experiencia de usuario.
Con pseudoclases estructurales puedes evitar añadir clases extra en el HTML.
Evita reglas :nth-child() demasiado complicadas para mantener el código legible.