Pseudoclases en 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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
