Комплексне комбинације селектора потомака и класа у ЦСС-у

Нека сада имамо следећи код:

html<div class="block">
  <h2 class="header">Наслов х2</h2>
  <p>
    текст
  </p>
  
  <h3 class="header">Наслов х3</h3>
  <p>
    текст
  </p>
  <p>
    текст
  </p>
</div>
<div class="block">
  <h2 class="header">Наслов х2</h2>
  <p>
    текст
  </p>
  
  <h3 class="header">Наслов х3</h3>
  <p>
    текст
  </p>
  <p>
    текст
  </p>
</div>

Хајде да пронађемо све елементе са класом header, који се налазе унутар елемента са класом block, и задамо им фонт Arial:

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

Као што се види у ХТМЛ коду, унутар елемента са класом block елементи са класом header могу бити и наслови h2, и наслови h3. Хајде да напишемо селекторе који разликују ове наслове, и нешто урадимо са тим насловима.

Хајде да изаберемо све h2 са класом header, који се налазе унутар елемента са класом block:

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

А сада изаберимо све h3 са класом header, који се налазе унутар елемента са класом block:

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

Хајде да сакупимо цео наш ЦСС заједно:

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

Применимо га на наш ХТМЛ код:

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