Złożone kombinacje selektora potomków i klas w CSS

Załóżmy teraz, że mamy następujący kod:

html<div class="block">
  <h2 class="header">Tytuł h2</h2>
  <p>
    tekst
  </p>
  
  <h3 class="header">Tytuł h3</h3>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div class="block">
  <h2 class="header">Tytuł h2</h2>
  <p>
    tekst
  </p>
  
  <h3 class="header">Tytuł h3</h3>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Znajdźmy wszystkie elementy z klasą header, znajdujące się wewnątrz elementu z klasą block, i ustawmy im czcionkę Arial:

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

Jak widać w kodzie HTML, wewnątrz elementu z klasą block elementy z klasą header mogą być zarówno nagłówkami h2, jak i nagłówkami h3. Napiszmy selektory, rozróżniające te nagłówki, i coś zróbmy z tymi nagłówkami.

Wybierzmy wszystkie h2 z klasą header, znajdujące się wewnątrz elementu z klasą block:

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

A teraz wybierzmy wszystkie h3 z klasą header, znajdujące się wewnątrz elementu z klasą block:

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

Zbierzmy cały nasz CSS razem:

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

Zastosujmy go do naszego kodu 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;
}