Selectores Básicos en CSS

¿Qué es un selector en CSS?

Un selector CSS es la herramienta que permite identificar elementos dentro de un documento HTML para aplicarles estilos. A través de ellos, indicamos a qué elementos queremos afectar desde el archivo de estilos. Aunque su uso principal está en CSS, también pueden emplearse en JavaScript para manipular elementos mediante su referencia.

Al comenzar a trabajar con CSS, solemos usar selectores básicos que coinciden con etiquetas HTML específicas, como div, pero a medida que aprendemos más, descubrimos formas más eficientes de seleccionar grupos de elementos o elementos concretos con mayor precisión.

Tipos básicos de selectores CSS

En esta sección veremos los selectores más comunes y fáciles de usar:

Veamos cada tipo de selector en detalle:

Selector por etiqueta

Este tipo de selector aplica estilos a todas las etiquetas HTML del mismo tipo. Por ejemplo:

cssCopiarEditardiv {
  background-color: red;
}

Este código cambiará el fondo de todas las etiquetas <div> a color rojo. Lo mismo ocurre con otros elementos, como:

cssCopiarEditarstrong {
  color: red;
}

Este ejemplo hará que todo el texto dentro de etiquetas <strong> se muestre en rojo. Aunque sencillo, este enfoque carece de precisión y no permite distinguir entre elementos similares en diferentes contextos.

Selector por ID

Los atributos id en HTML son únicos, es decir, deben asignarse a un solo elemento por documento. Por ello, el selector por ID se utiliza para aplicar estilos a un único componente del sitio:

htmlCopiarEditar<div id="header">
  <p>Bienvenido</p>
</div>

cssCopiarEditar#header {
  background-color: lightblue;
}

En este caso, el estilo se aplicará solo al elemento con id="header". Aunque es funcional, el uso de IDs para estilizar no es tan recomendable como el uso de clases, ya que limita la reutilización y escalabilidad del código.

Selector por clase

Las clases permiten aplicar estilos a múltiples elementos a la vez. A diferencia de los IDs, una misma clase puede usarse en tantos elementos como sea necesario:

htmlCopiarEditar<button class="opcion">Aceptar</button>
<button class="opcion">Cancelar</button>
<button class="volver">Volver</button>

cssCopiarEditar.opcion {
  background-color: green;
  color: white;
}

.volver {
  background-color: orange;
  color: white;
}

Este método es más flexible y facilita la organización del diseño, permitiendo usar un mismo estilo para varios elementos sin duplicar reglas.

También es posible combinar selectores para diferenciar aún más:

cssCopiarEditarbutton.opcion {
  font-weight: bold;
}

p.opcion {
  color: red;
}

Aquí, .opcion aplicada a un <button> tendrá un estilo diferente que si se aplica a un <p>.

Múltiples clases en un elemento

En HTML, un elemento puede tener varias clases simultáneamente, separadas por espacios:

htmlCopiarEditar<button class="opcion primaria grande">Enviar</button>

Esto permite aplicar estilos compuestos, donde cada clase define un aspecto particular del diseño. Por ejemplo:

cssCopiarEditar.opcion {
  padding: 10px;
}

.primaria {
  background-color: blue;
}

.grande {
  font-size: 18px;
}

Este enfoque modular es base de metodologías como CSS atómico o el uso de clases utilitarias, comunes en frameworks como Tailwind CSS.

Selectores combinados

Podemos crear reglas que se apliquen solo a elementos que cumplan múltiples condiciones:

cssCopiarEditarbutton.opcion.primaria.grande {
  border-radius: 6px;
}

En este caso, los estilos se aplicarán únicamente si el elemento:

• Es una etiqueta <button>,
• Tiene la clase .opcion,
• Tiene la clase .primaria,
• Y también tiene la clase .grande.

Si falta alguna de estas clases, la regla no se aplicará.

Conclusión

Los selectores son el corazón de CSS: definen qué elementos serán estilizados y con qué reglas. Comenzando con selectores básicos por etiquetas, y evolucionando hacia selectores por clase, ID y combinados, podemos construir estructuras de estilos limpias, eficientes y escalables. Dominar su uso es fundamental para el desarrollo web profesional.