Combinații complexe de selectori de descendenți și clase în CSS

Să presupunem că avem următorul cod:

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

Să găsim toate elementele cu clasa header, care se află în interiorul elementului cu clasa block, și să le setăm fontul Arial:

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

După cum se vede în codul HTML, în interiorul elementului cu clasa block elementele cu clasa header pot fi atât titluri h2, cât și titluri h3. Să scriem selectori care să facă diferența între aceste titluri și să facem ceva cu aceste titluri.

Să selectăm toate h2 cu clasa header, aflate în interiorul elementului cu clasa block:

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

Și acum să selectăm toate h3 cu clasa header, aflate în interiorul elementului cu clasa block:

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

Să adunăm tot CSS-ul nostru împreună:

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

Să aplicăm acest CSS codului nostru 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;
}