Kesalahan Pemula dalam Selektor Keturunan

Perhatikan selektor berikut:

cssp.eee {
  color: red;
}

Anda seharusnya sudah tahu, bahwa selektor seperti itu akan memilih paragraf dengan kelas eee. Misalnya, yang berikut ini:

html<p class="eee">
  lorem ipsum
</p>
<p class="eee">
  lorem ipsum
</p>

Sekarang perhatikan selektor ini:

cssp .eee {
  color: green;
}

Selektor ini berbeda dari yang sebelumnya karena antara nama tag dan nama kelas terdapat spasi. Spasi ini mewakili selektor keturunan. Artinya dalam kasus ini kita memilih semua elemen dengan kelas eee, yang berada di dalam paragraf. Misalnya, selektor ini akan memilih span berikut:

html<p>
  lorem <span class="eee">ipsum</span>
</p>
<p>
  lorem <span class="eee">ipsum</span>
</p>

Hasil eksekusi kode:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee p .bbb {
  color: red;
}