Selectores — Fundamentos de HTML y CSS

• Clases e identificadores
  • CSS para personalizar estos elementos:
• Selectores en CSS
• Selectores avanzados
  • Selectores descendientes
  • Selectores de hijos directos

Los selectores en CSS permiten elegir elementos específicos en una página HTML para aplicar estilos. Son fundamentales para organizar los estilos de manera eficiente y evitar código duplicado.

Clases e identificadores

A veces queremos aplicar estilos a elementos específicos de la página. Para esto usamos:

Veamos un ejemplo:

<h2 class="titulo">Título Principal</h2>
<h2 class="subtitulo">Subtítulo</h2>
<div id="destacado">Este es un elemento único</div>

CSS para personalizar estos elementos:

.titulo {
  font-size: 24px; /* Cambia el tamaño del texto a 24 píxeles */
}

.subtitulo {
  color: gray; /* Hace que el texto sea gris */
}

#destacado {
  background-color: yellow; /* Cambia el fondo del elemento con ID "destacado" a amarillo */
}

• .titulo cambia el tamaño del texto a 24 píxeles en todos los elementos con la clase titulo.
• .subtitulo hace que el texto de los elementos con la clase subtitulo sea gris.
• #destacado aplica un fondo amarillo al elemento con el ID destacado.

👉 Ver ejemplo en CodePen

También puedes usar una class y un id juntos

<h1 id="encabezado" class="centrado">Bienvenido a mi sitio</h1>

Esto te permite aplicar estilos únicos con el id (#encabezado) y estilos reutilizables con la class (.centrado).

En el CSS:

#encabezado {
  color: blue;
}

.centrado {
  text-align: center;
}

Resultado: el encabezado se verá azul y centrado en la página.

Selectores en CSS

Los selectores nos permiten seleccionar elementos de diferentes maneras para aplicarles estilos. A continuación, puedes ver los tipos básicos:

Selectores avanzados

A veces, queremos aplicar estilos a elementos dentro de otros elementos más grandes. Para esto usamos selectores avanzados.

Selectores descendientes

Selecciona todos los elementos que están dentro de otro, sin importar qué tan anidados estén.

.contenedor p { /* Cambia el color de todos los <p> dentro de .contenedor a azul */
  color: blue;
}

Este código hará que todos los párrafos dentro de .contenedor sean azules. 🔵 Ver ejemplo en CodePen

Selectores de hijos directos

Si queremos aplicar un estilo solo a los hijos directos (no a los elementos anidados más profundamente), usamos >.

.contenedor > p { /* Solo los párrafos directamente dentro de .contenedor serán rojos */
  color: red;
}

Esto significa: Solo los párrafos (<p>) que estén directamente dentro de .contenedor serán rojos. 🔴 Aquí puedes ver cómo funciona