Složité kombinace selektorů potomků a tříd v CSS

Nyní předpokládejme, že máme následující kód:

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

Najděme všechny prvky s třídou header, které se nacházejí uvnitř prvku s třídou block, a nastavme jim písmo Arial:

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

Jak je vidět v HTML kódu, uvnitř prvku s třídou block mohou být prvky s třídou header jak nadpisy h2, tak i nadpisy h3. Napišme selektory, které rozlišují tyto nadpisy, a něco s těmito nadpisy udělejme.

Vyberme všechny h2 s třídou header, které se nacházejí uvnitř prvku s třídou block:

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

A nyní vyberme všechny h3 s třídou header, které se nacházejí uvnitř prvku s třídou block:

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

Spojme celý náš CSS kód dohromady:

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

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