Selectores en CSS
Los selectores en CSS determinan a qué elementos HTML se aplican los estilos. Con ellos se pueden seleccionar elementos individuales, múltiples o estructuras complejas.
Selectores básicos
Los selectores básicos hacen referencia directa a un elemento HTML, como <p>, <div>, <h1>. Con ellos se identifican fácilmente elementos en el documento.
En el siguiente ejemplo, todo el texto de los elementos <p> se vuelve azul:
Tipos comunes de selectores
En CSS se pueden usar diferentes tipos de selectores. La siguiente tabla muestra los más comunes:
| Selector | Descripción |
|---|---|
| p | Selecciona todos los elementos <p>. |
| .class | Selecciona los elementos con la clase especificada. |
| #id | Selecciona el elemento con el identificador especificado. |
| * | Selecciona todos los elementos HTML. |
Selectores compuestos
Los selectores compuestos permiten crear reglas más precisas, combinando relaciones padre-hijo o estados.
Pseudoclases
Las pseudoclases apuntan a estados y situaciones especiales, como cuando el cursor pasa sobre un elemento o cuando es el primer ítem de una lista.
Selectores de atributos
Con los selectores de atributos podemos apuntar a elementos que poseen ciertos atributos o cuyos valores coinciden con un patrón.
Combinadores
Los combinadores permiten definir la relación entre elementos, como padre-hijo, hermanos o jerarquías generales.
Consejos para usar selectores
El uso eficiente de los selectores ayuda a mantener el CSS limpio y evita código innecesario. Aquí algunos consejos:
- No uses selectores demasiado generales (*), ya que pueden generar problemas de rendimiento.
- Usa selectores de ID con moderación; prefiere clases para mayor flexibilidad.
- Presta atención a la especificidad: un selector más preciso sobrescribe a uno más general.
✨ 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.
