CSSтегиндеги мураскор селекторлору менен классдардын татаал айкалыштары

Эми бизде төмөнкү код бар деп коёлу:

html<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    текст
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    текст
  </p>
  <p>
    текст
  </p>
</div>
<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    текст
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    текст
  </p>
  <p>
    текст
  </p>
</div>

Келгиле, block классы бар элементтин ичинде жайгашкан, бардык header классы бар элементтерди таап, аларга Arial шрифтин коёлу:

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

HTML кодунда көрүнүп тургандай, block классы бар элементтин ичинде header классы бар элементтер h2 баш аталышы же h3 баш аталышы болушу мүмкүн. Келгиле, бул баш аталыштарды айырмалоочу селекторлорду жазып, бул баш аталыштар менен бир нерсе кылалы.

Келгиле, block классы бар элементтин ичинде жайгашкан, бардык header классы бар h2 элементтерин тандап алалы:

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

Эми block классы бар элементтин ичинде жайгашкан, бардык header классы бар h3 элементтерин тандап алалы:

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