Kompleksne kombinacije selektora potomaka i klasa u CSS-u

Neka sada imamo sledeći kod:

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

Hajde da pronađemo sve elemente sa klasom header, koji se nalaze unutar elementa sa klasom block, i dodelimo im font Arial:

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

Kao što se vidi u HTML kodu, unutar elementa sa klasom block elementi sa klasom header mogu biti i naslovi h2, i naslovi h3. Hajde da napišemo selektore koji razlikuju ove naslove, i nešto uradimo sa tim naslovima.

Hajde da izaberemo sve h2 sa klasom header, koji se nalaze unutar elementa sa klasom block:

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

A sada izaberimo sve h3 sa klasom header, koji se nalaze unutar elementa sa klasom block:

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

Hajde da sastavimo sav naš CSS zajedno:

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

Primenimo ga na naš HTML kod:

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