Zložité kombinácie selektora potomkov a tried v CSS

Povedzme, že teraz máme nasledujúci kód:

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>

Nájdime všetky prvky s triedou header, ktoré sa nachádzajú vo vnútri prvku s triedou block, a nastavme im písmo Arial:

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

Ako vidno v HTML kóde, vo vnútri prvku s triedou block môžu byť prvky s triedou header ako nadpisy h2, tak aj nadpisy h3. Napíšme selektory, ktoré rozlíšia tieto nadpisy, a niečo urobme s týmito nadpismi.

Vyberme všetky h2 s triedou header, ktoré sa nachádzajú vo vnútri prvku s triedou block:

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

A teraz vyberme všetky h3 s triedou header, ktoré sa nachádzajú vo vnútri prvku s triedou block:

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

Poďme zhromaždiť celý náš CSS kód spolu:

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

Aplikujme ho na náš HTML kód:

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;
}