Combinaciones complejas de selectores descendentes y clases en CSS

Supongamos que ahora tenemos el siguiente código:

html<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Encontremos todos los elementos con clase header, que se encuentran dentro de un elemento con clase block, y establezcamos la fuente Arial para ellos:

css.block .header {
  font-family: Arial;
}

Como se puede ver en el código HTML, dentro del elemento con clase block los elementos con clase header pueden ser tanto encabezados h2 como encabezados h3. Escribamos selectores que distingan estos encabezados, y hagamos algo con estos encabezados.

Seleccionemos todos los h2 con clase header, que se encuentran dentro de un elemento con clase block:

css.block h2.header {
  font-size: 30px;
  color: red;
}

Y ahora seleccionemos todos los h3 con clase header, que se encuentran dentro de un elemento con clase block:

css.block h3.header {
  font-size: 20px;
  color: green;
}

Juntemos todo nuestro CSS:

css.block .header {
  font-family: Arial;
}
.block h2.header {
  font-size: 30px;
  color: red;
}
.block h3.header {
  font-size: 20px;
  color: green;
}

Apliquémoslo a nuestro código HTML:

css.eee .bbb {
  color: red;
}

css.eee h2 {
  color: red;
}

css.eee h2.bbb {
  color: red;
}

css.eee h3.bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee .bbb .kkk {
  color: red;
}