Складаныя камбінацыі селектара нашчадкаў і класаў у CSS

Хай цяпер у нас ёсць наступны код:

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

Давайце знойдзем усе элементы з класам header, якія знаходзяцца ўнутры элемента з класам block, і зададзім ім шрыфт Arial:

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

Як відаць у HTML кодзе, унутры элемента з класам 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 разам:

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

Прымянім яго да нашага 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;
}