CSS-də valeyn seçicisi və siniflərin mürəkkəb birləşmələri

Indi tutaq ki, bizdə aşağıdakı kod var:

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>

Gəlin block sinifli elementin daxilində yerləşən, header sinifli bütün elementləri tapaq və onlara Arial şrifti təyin edək:

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

HTML kodunda göründüyü kimi, block sinifli elementin daxilində header sinifli elementlər həm h2 başlıqları, həm də h3 başlıqları ola bilər. Gəlin bu başlıqları fərqləndirən seçicilər yazaq və bu başlıqlarla bir şeylər edək.

Gəlin block sinifli elementin daxilində yerləşən, header sinifli bütün h2 elementlərini seçək:

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

İndi isə block sinifli elementin daxilində yerləşən, header sinifli bütün h3 elementlərini seçək:

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

Gəlin bütün CSS kodumuzu birlikdə yığaq:

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

Onu bizim HTML kodumuza tətbiq edək:

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