Kombinasi Kompleks Selektor Keturunan dan Kelas dalam CSS

Misalkan sekarang kita memiliki kode berikut:

html<div class="block">
  <h2 class="header">Judul h2</h2>
  <p>
    teks
  </p>
  
  <h3 class="header">Judul h3</h3>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div class="block">
  <h2 class="header">Judul h2</h2>
  <p>
    teks
  </p>
  
  <h3 class="header">Judul h3</h3>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>

Mari kita temukan semua elemen dengan kelas header, yang berada di dalam elemen dengan kelas block, dan atur font mereka menjadi Arial:

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

Seperti yang terlihat dalam kode HTML, di dalam elemen dengan kelas block, elemen dengan kelas header bisa berupa judul h2, maupun judul h3. Mari kita tulis selektor yang membedakan judul-judul ini, dan lakukan sesuatu pada judul-judul tersebut.

Mari kita pilih semua h2 dengan kelas header, yang berada di dalam elemen dengan kelas block:

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

Dan sekarang mari kita pilih semua h3 dengan kelas header, yang berada di dalam elemen dengan kelas block:

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

Mari kita gabungkan semua CSS kita:

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

Terapkan ke kode HTML kita:

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