Kombinasi Kompleks Pemilih Keturunan dan Kelas dalam CSS
Katakan sekarang kita mempunyai kod berikut:
<div class="block">
<h2 class="header">Tajuk h2</h2>
<p>
teks
</p>
<h3 class="header">Tajuk h3</h3>
<p>
teks
</p>
<p>
teks
</p>
</div>
<div class="block">
<h2 class="header">Tajuk h2</h2>
<p>
teks
</p>
<h3 class="header">Tajuk h3</h3>
<p>
teks
</p>
<p>
teks
</p>
</div>
Mari cari semua elemen dengan kelas header,
yang berada di dalam elemen dengan kelas block,
dan tetapkan fon mereka kepada Arial:
.block .header {
font-family: Arial;
}
Seperti yang dapat dilihat dalam kod HTML, di dalam elemen dengan
kelas block, elemen dengan kelas header
boleh menjadi sama ada tajuk h2, mahupun
tajuk h3. Mari tulis
pemilih yang membezakan tajuk-tajuk ini, dan lakukan sesuatu
dengan tajuk-tajuk tersebut.
Mari pilih semua h2 dengan kelas header,
yang berada di dalam elemen dengan kelas block:
.block h2.header {
font-size: 30px;
color: red;
}
Dan sekarang mari pilih semua h3 dengan kelas
header, yang berada di dalam elemen
dengan kelas block:
.block h3.header {
font-size: 20px;
color: green;
}
Mari kumpulkan semua CSS kita bersama:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Mari gunakannya pada kod HTML kami:
Terangkan apa yang dipilih oleh pemilih dalam kod di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:
.eee .bbb {
color: red;
}
Terangkan apa yang dipilih oleh pemilih dalam kod di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:
.eee h2 {
color: red;
}
Terangkan apa yang dipilih oleh pemilih dalam kod di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:
.eee h2.bbb {
color: red;
}
Terangkan apa yang dipilih oleh pemilih dalam kod di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:
.eee h3.bbb {
color: red;
}
Terangkan apa yang dipilih oleh pemilih dalam kod di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:
.eee p.bbb {
color: red;
}
Terangkan apa yang dipilih oleh pemilih dalam kod di bawah. Kemudian tulis kod HTML yang sesuai dengan pemilih ini. Ini kod dengan pemilih:
.eee .bbb .kkk {
color: red;
}
