Kesalahan Pemula dalam Selektor Keturunan

Perhatikan selektor berikut:

p.eee {
	color: red;
}

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

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

Sekarang perhatikan selektor ini:

p .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:

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

Hasil eksekusi kode:

Jadi, sekali lagi: p.eee - selektor seperti ini memilih paragraf dengan kelas eee. Tetapi jika saya melakukannya seperti ini: p .eee, maka saya memilih semua elemen dengan kelas eee, yang berada di dalam paragraf. Pahami perbedaan ini.

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

p.bbb {
	color: red;
}

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

p .bbb {
	color: red;
}

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee p.bbb {
	color: red;
}

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee p .bbb {
	color: red;
}