Сложные комбинации селектора потомков и классов в CSS

Пусть теперь у нас есть следующий код:

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>

Давайте найдем все элементы с классом header, находящиеся внутри элемента с классом block, и зададим им шрифт Arial:

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

Как видно в HTML коде, внутри элемента с классом block элементы с классом header могут быть как заголовками h2, так и заголовками h3. Давайте напишем селекторы, отличающие эти заголовки, и что-нибудь сделаем с этими заголовками.

Давайте выберем все h2 с классом header, находящиеся внутри элемента с классом block:

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

А теперь выберем все h3 с классом header, находящиеся внутри элемента с классом block:

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

Давайте соберем весь наш CSS вместе:

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

Применим его к нашему 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;
}