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.