CSS'de Karmaşık Alt Seçici ve Sınıf Kombinasyonları

Şimdi elimizde aşağıdaki kod olduğunu varsayalım:

html<div class="block">
  <h2 class="header">Başlık h2</h2>
  <p>
    metin
  </p>
  
  <h3 class="header">Başlık h3</h3>
  <p>
    metin
  </p>
  <p>
    metin
  </p>
</div>
<div class="block">
  <h2 class="header">Başlık h2</h2>
  <p>
    metin
  </p>
  
  <h3 class="header">Başlık h3</h3>
  <p>
    metin
  </p>
  <p>
    metin
  </p>
</div>

block sınıfına sahip öğenin içinde bulunan, header sınıfına sahip tüm öğeleri bulalım ve onlara Arial yazı tipini atayalım:

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

HTML kodunda görüldüğü gibi, block sınıfına sahip öğenin içinde, header sınıfına sahip öğeler hem h2 başlıkları hem de h3 başlıkları olabilir. Şimdi bu başlıkları ayırt eden seçiciler yazalım ve bu başlıklarla bir şeyler yapalım.

block sınıfına sahip öğenin içinde bulunan, header sınıfına sahip tüm h2 öğelerini seçelim:

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

Şimdi de block sınıfına sahip öğenin içinde bulunan, header sınıfına sahip tüm h3 öğelerini seçelim:

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

Şimdi tüm CSS'mizi bir araya getirelim:

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

Şimdi bunu HTML kodumuza uygulayalım:

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