Zapletene kombinacije selektorja potomcev in razredov v CSS

Recimo, da imamo naslednjo kodo:

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

Poiščimo vse elemente z razredom header, ki se nahajajo znotraj elementa z razredom block, in jim nastavimo pisavo Arial:

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

Kot je razvidno iz HTML kode, so lahko elementi z razredom header znotraj elementa z razredom block tako naslovi h2 kot tudi naslovi h3. Napišimo selektorje, ki razlikujejo te naslove, in nekaj naredimo s temi naslovi.

Izberimo vse h2 z razredom header, ki se nahajajo znotraj elementa z razredom block:

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

In zdaj izberimo vse h3 z razredom header, ki se nahajajo znotraj elementa z razredom block:

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

Zložimo vso našo CSS kodo skupaj:

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

Uporabimo jo za našo HTML kodo:

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