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