CSS-da avlod tanlovchilari va sinflarning murakkab kombinatsiyalari

Endi esa bizda quyidagi kod bor deb faraz qilaylik:

html<div class="block">
  <h2 class="header">Sarlavha h2</h2>
  <p>
    matn
  </p>
  
  <h3 class="header">Sarlavha h3</h3>
  <p>
    matn
  </p>
  <p>
    matn
  </p>
</div>
<div class="block">
  <h2 class="header">Sarlavha h2</h2>
  <p>
    matn
  </p>
  
  <h3 class="header">Sarlavha h3</h3>
  <p>
    matn
  </p>
  <p>
    matn
  </p>
</div>

Keling, block sinfidagi element ichida joylashgan, header sinfidagi barcha elementlarni topamiz va ularga Arial shriftini belgilaymiz:

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

HTML kodida ko'rinib turibdiki, block sinfidagi element ichida header sinfidagi elementlar h2 sarlavhalari ham, h3 sarlavhalari ham bo'lishi mumkin. Keling, ushbu sarlavhalarni ajratib turadigan tanlovchilarni yozaylik va bu sarlavhalar bilan biror narsa qilaylik.

Keling, block sinfidagi element ichida joylashgan, header sinfidagi barcha h2 larni tanlab olaylik:

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

Endi esa block sinfidagi element ichida joylashgan, header sinfidagi barcha h3 larni tanlab olaylik:

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

Keling, butun CSS kodimizni birlashtiramiz:

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

Keling, uni bizning HTML kodimizga qo'llaymiz:

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