Cómo usar combinadores de CSS con ejemplos

Sigo trabajando en mis puntos débiles con CSS, y hoy le toca el turno a los combinadores de CSS.

A veces queremos seleccionar elementos sin afectar a otros y entender la relación clave entre ellos.

Los combinadores de CSS nos ayudan a escribir mejores selectores tomando esa relación como base. Tenemos cuatro tipos de combinadores:

• Selector descendiente
• Selector de hijo directo
• Selector de hermano adyacente
• Selector de hermano general

Selector descendiente

Coincide con todos los elementos que son descendientes de un elemento determinado.

En mi ejemplo, tenemos 2 div con la clase sandbox que contienen etiquetas p, además de otros div adicionales que también contienen p.

 <div class="sandbox">
        <p>hello</p>
      <div class="actions">
        <p>close</p>
      </div>
    </div>
     <div class="sandbox">
        <p>adios</p>
      <div class="actions">
        <p>close</p>
      </div>
    </div>

Para cambiar el color de fondo a todos los p dentro de sandbox:

.sandbox p {
 background-color: red;
}

Ejemplo en JSFiddle

Funciona, pero no al 100%, porque los otros p dentro del div con la clase actions también reciben el color de fondo.

Por lo tanto, si queremos una regla que seleccione todos los elementos dependientes, usamos el selector descendiente.

Pero si solo quiero seleccionar los p de sandbox y omitir los demás, aquí es donde el selector de hijo directo nos ayuda.

Selector de hijo directo (>)

El selector de hijo directo utiliza el símbolo > y selecciona únicamente los hijos directos del selector. De esta manera logramos nuestro objetivo de aplicar el estilo solo a los p de sandbox.

.sandbox > p {
  background-color: red;
}

Ejemplo en JSFiddle

¡Genial, continuemos!

Vamos a agregar más elementos a mi sandbox: un h2 y varios span.

Quiero seleccionar únicamente el primer span que está junto a mi h2.

<div class="sandbox">
    <h2>
      Angular 11
    </h2>
    <span>
      Google Framework.
    </span>
    <span>ngInit</span>
    <span>Observable</span>
    <p>hello</p>
 
    <div class="actions">
      <p>close</p>
    </div>
  </div>
....

Selector de hermano adyacente

El selector de hermano adyacente utiliza el símbolo + y selecciona el siguiente elemento inmediato al selector. En nuestro caso, h2 + span toma el primer span que está junto a h2.

h2 + span {
	background-color: pink;
	display: block;
	border-radius: 5px;
}

Ejemplo en JSFiddle

¡Funciona! Pero si quiero que todos los span restantes también tengan otro aspecto, ¿qué usamos? ¡El selector hermano general!

Selector de hermano general

El selector de hermano general utiliza el símbolo ~ y selecciona todos los hermanos ubicados después de él. De esta forma, hacemos que todos los span siguientes tengan otro aspecto, mientras que el primer span conserva su estilo.

span ~ span {
	background-color: gray;
	display: block;
}

Ejemplo en JSFiddle

¡Listo! Esto te servirá de ayuda con los combinadores de CSS. Si te gustó este artículo, compártelo y revisa la documentación para leer más en MDN.

Foto por Natalie Grainger en Unsplash