CSS: Combinadores

Los combinadores sirven para configurar los estilos CSS utilizando elementos de HTML sin sobrecargarlo con constantes declaraciones.

Os pongo un ejemplo:

.container > div:nth-child(2) h1, .container > div:nth-child(2) p {

    background: green;

}

Para este HTML:

<div class='container'>

  <div>

    <h1>Primer título</h1>

    <p>Primera caja</p>

  </div>

  <div>

    <h1>Segundo título</h1>

    <p>Segunda caja</p>

  </div>

  <div>

    <h1>Tercer título</h1>

    <p>Tercera caja</p>

  </div>

</div>

Cómo veis podéis recorrer todo el DOM de la web para configurar sus elementos de manera limpia y ligera para el HTML.

Espero que os sea de utilidad ^_^.