Combinações complexas de seletores descendentes e classes em CSS

Suponha que agora temos o seguinte 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>

Vamos encontrar todos os elementos com a classe header, que estão dentro de um elemento com a classe block, e definir a fonte como Arial:

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

Como pode ser visto no código HTML, dentro do elemento com a classe block, os elementos com a classe header podem ser tanto títulos h2 quanto títulos h3. Vamos escrever seletores que diferenciam esses títulos e fazer algo com eles.

Vamos selecionar todos os h2 com a classe header, que estão dentro de um elemento com a classe block:

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

E agora vamos selecionar todos os h3 com a classe header, que estão dentro de um elemento com a classe block:

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

Vamos juntar todo o nosso CSS:

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

Vamos aplicá-lo ao nosso 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;
}