Pemilih Keturunan dalam CSS

Katakan kita mempunyai senarai ul dan senarai ol:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>
<ol>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ol>

Mari warnakan tag li dalam senarai ini dengan warna merah:

li {
	color: red;
}

Sekarang katakan kita mahu warnakan tag li senarai ul dengan warna merah, dan tag li senarai ol - dengan warna hijau.

Dalam kes ini, pemilih keturunan akan membantu kita. Ia membenarkan pemilihan tag berdasarkan elemen induknya. Untuk ini, anda perlu nyatakan pemilih induk, dan diikuti dengan ruang - pemilih keturunan. Dalam kes kami, pemilih ul li akan memilih semua tag li dari senarai ul, dan pemilih ol li - akan memilih semua tag li dari senarai ol. Mari warnakan mereka dengan warna yang dikehendaki:

ul li {
	color: red;
}
ol li {
	color: green;
}

Pemilih keturunan tidak semestinya terdiri daripada dua pemilih tag - boleh terdapat sebarang bilangan, ditulis dengan ruang. Dalam kod berikut, sebagai contoh, semua tag i yang berada di dalam tag li dipilih, yang mana mereka sendiri berada di dalam tag ul:

ul li i {
	color: red;
}

Diberikan kod berikut:

<ul>
	<li>teks <i>cetek condong</i></li>
	<li>teks <i>cetek condong</i></li>
	<li>teks <i>cetek condong</i></li>
	<li>teks <i>cetek condong</i></li>
</ul>

<p>
	teks perenggan <i>cetek condong</i>
</p>
<p>
	teks perenggan <i>cetek condong</i>
</p>

Warnakan dengan warna merah cetek condong dari tag ul, dan dengan warna hijau - cetek condong dari tag p.

Diberikan kod berikut:

<p>
	teks perenggan <b><i>tebal condong</i></b>
</p>
<p>
	teks perenggan <i>cetek condong</i>
</p>

Warnakan dengan warna merah cetek condong yang berada di dalam tag b, yang mana sendiri berada di dalam tag p.