Selectores CSS avanzados y combinadores

Los selectores básicos te ayudan a dar estilo a páginas simples. Cuando tu HTML crece, muchas veces necesitas dar estilo a elementos según dónde están, dentro de qué elemento están o qué atributos tienen.

Los selectores avanzados te ayudan a apuntar a los elementos con más precisión. Así puedes escribir HTML más limpio y evitar agregar una clase a cada etiqueta.

Recordatorio rápido de selectores básicos

Ya conoces estos selectores comunes:

• Un selector de elemento apunta a todas las etiquetas de un tipo, como p.
• Un selector de clase empieza con . y apunta a elementos con esa clase, como .button.
• Un selector de ID empieza con # y apunta a un elemento único, como #main-header.

Los selectores avanzados se apoyan en estas bases.

¿Qué es un combinador?

Un combinador es un símbolo o espacio que describe una relación entre dos selectores.

Por ejemplo, un combinador puede significar:

• Selecciona un párrafo dentro de una tarjeta.
• Selecciona solo los elementos directos dentro de un menú.
• Selecciona un botón que viene justo después de un campo de texto.

Selector descendiente

El selector descendiente selecciona un elemento dentro de otro, incluso si está anidado varios niveles hacia dentro.

Sintaxis:

El espacio entre los selectores es importante.

<div class="card">
  <h2>Bienvenido</h2>
  <div>
    <p>Este párrafo está dentro de la tarjeta.</p>
  </div>
</div>

<p>Este párrafo está fuera de la tarjeta.</p>

<style>
  .card p {
    color: blue;
  }
</style>

La regla .card p significa: busca cualquier elemento p que viva en cualquier lugar dentro de un elemento con la clase card.

El párrafo fuera de .card no se selecciona.

Úsalo cuando quieras dar estilo al contenido dentro de una sección, tarjeta, artículo o zona de navegación.

Selector hijo

El selector hijo selecciona solo hijos directos. No selecciona nietos ni elementos anidados más profundo.

Sintaxis:

<div class="toolbar">
  <button>Guardar</button>
  <button>Vista previa</button>

  <div class="more-actions">
    <button>Eliminar</button>
  </div>
</div>

<style>
  .toolbar > button {
    background-color: blue;
    color: white;
    padding: 8px 12px;
  }
</style>

La regla .toolbar > button significa: selecciona solo los elementos button que están directamente dentro de .toolbar.

El botón Eliminar no se selecciona porque primero está dentro de .more-actions. Está a más de un nivel de profundidad.

Úsalo cuando una sección tiene elementos directos y elementos anidados que deben verse diferente.

Selector de hermano adyacente

El selector de hermano adyacente selecciona un elemento que viene inmediatamente después de otro elemento.

Los elementos hermanos comparten el mismo padre.

Sintaxis:

<article>
  <h2>Aprender CSS</h2>
  <p>Este primer párrafo introduce la lección.</p>
  <p>Este segundo párrafo continúa la idea.</p>
</article>

<style>
  h2 + p {
    margin-top: 0;
    color: blue;
    font-size: 20px;
  }
</style>

La regla h2 + p significa: selecciona un elemento p solo cuando viene directamente después de un h2.

El segundo párrafo no se selecciona porque no está directamente después del encabezado.

Úsalo cuando el primer párrafo después de un encabezado necesita un estilo especial.

Selector de hermano general

El selector de hermano general selecciona todos los elementos hermanos coincidentes que vienen después de otro elemento.

Deben compartir el mismo padre, pero no tienen que estar justo uno al lado del otro.

Sintaxis:

<section>
  <h3>Ingredientes</h3>
  <strong>Lista de desayuno</strong>
  <p>Harina</p>
  <p>Huevos</p>
  <p>Leche</p>
</section>

<style>
  h3 ~ p {
    color: blue;
  }
</style>

La regla h3 ~ p significa: selecciona cada elemento p que viene después del h3 dentro del mismo padre.

El elemento strong entre ellos no importa.

Úsalo cuando varios elementos después de un encabezado o etiqueta necesitan el mismo estilo.

Selectores de atributo

Un selector de atributo selecciona elementos por sus atributos HTML.

Los atributos son detalles adicionales dentro de las etiquetas HTML, como href, type, alt o placeholder.

Sintaxis:

<label>
  Nombre
  <input type="text" placeholder="Escribe tu nombre" />
</label>

<label>
  Contraseña
  <input type="password" placeholder="Escribe tu contraseña" />
</label>

<style>
  input[type="text"] {
    background-color: lightyellow;
  }
</style>

La regla input[type="text"] significa: busca elementos input donde el atributo type sea exactamente text.

El campo de contraseña no se selecciona porque su tipo es password.

Úsalo para formularios, enlaces, imágenes y otros elementos donde el atributo dice qué tipo de elemento es.

Selector universal

El selector universal selecciona todos los elementos.

Sintaxis:

<h1>Título</h1>
<p>Texto del párrafo</p>
<button>Haz clic</button>

<style>
  * {
    color: blue;
  }
</style>

La regla * significa: selecciona todos los elementos de la página.

Úsalo con cuidado. Es común en pequeñas reglas de reinicio o estilos base simples, pero puede afectar más elementos de los que esperas.

Errores comunes de principiantes

• Escribir .cardp en lugar de .card p. .cardp busca una clase llamada cardp. .card p busca un párrafo dentro de .card.
• Usar > cuando el elemento no es un hijo directo. El selector hijo solo mira un nivel hacia abajo.
• Usar + cuando el elemento no está inmediatamente después. El selector de hermano adyacente solo selecciona el siguiente hermano coincidente.
• Usar + o ~ para elementos que no comparten el mismo padre. Los selectores de hermanos solo funcionan entre hermanos.
• Usar * demasiado. El selector universal puede hacer que tu CSS sea más difícil de predecir en páginas grandes.

Mini tarea

Mira este HTML:

<div class="box">
  <h2>Mi título</h2>
  <a href="https://example.com">Haz clic aquí</a>
</div>

<style></style>

Escribe una regla CSS con un selector descendiente que haga naranja el enlace dentro de .box.

Respuesta:

Quiz corto

Pregunta 1: ¿Qué símbolo se usa para el selector de hijo directo?

Respuesta: El símbolo mayor que >.

Pregunta 2: ¿Qué selector selecciona todos los elementos de la página?

Respuesta: El selector universal *.

Pregunta 3: ¿Cuál es la diferencia entre + y ~?

Respuesta: + selecciona solo el siguiente hermano. ~ selecciona todos los hermanos coincidentes que vienen después.

Pequeño reto

Intenta dar estilo a esta tarjeta de formulario:

• Usa un selector hijo para poner gris el texto del párrafo directo.
• Usa un selector de atributo para dar al campo de texto un borde gris.
• Usa un selector de hermano adyacente para poner en negrita el texto del botón.

<div class="login-card">
  <p>Inicia sesión abajo.</p>
  <input type="text" placeholder="Usuario" />
  <button>Iniciar sesión</button>
</div>

<style>
  /* 1. Da estilo al párrafo directo */

  /* 2. Da estilo al campo de texto */

  /* 3. Da estilo al botón después del input */
</style>

Una posible respuesta:

Resumen

• El selector descendiente usa un espacio y selecciona elementos anidados.
• El selector hijo > selecciona solo hijos directos.
• El selector de hermano adyacente + selecciona el siguiente hermano.
• El selector de hermano general ~ selecciona hermanos coincidentes que vienen después.
• Los selectores de atributo apuntan a elementos por sus atributos HTML.
• El selector universal * selecciona todos los elementos.

Lecciones relacionadas

• Sintaxis CSS y selectores básicos
• Especificidad, cascada y herencia en CSS
• Display y posicionamiento en CSS