Selektor Keturunan dalam CSS

Misalkan kita memiliki daftar ul dan daftar 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 kita warnai tag li dalam daftar-daftar ini dengan warna merah:

li {
	color: red;
}

Sekarang misalkan kita ingin mewarnai tag li dari daftar ul dengan warna merah, dan tag li dari daftar ol - dengan warna hijau.

Dalam hal ini, selektor keturunan akan membantu kita. Selektor ini memungkinkan untuk memilih tag berdasarkan induknya. Untuk melakukannya, Anda perlu menentukan selektor induk, dan dipisahkan dengan spasi - selektor keturunannya. Dalam kasus kami, selektor ul li akan memilih semua tag li dari daftar ul, dan selektor ol li - akan memilih semua tag li dari daftar ol. Mari warnai mereka dengan warna yang sesuai:

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

Selektor keturunan tidak harus terdiri dari dua selektor tag - bisa ada berapa pun jumlahnya, ditulis dengan spasi. Dalam kode berikut, misalnya, semua tag i yang berada di dalam tag li dipilih, yang pada gilirannya berada di dalam tag ul:

ul li i {
	color: red;
}

Diberikan kode berikut:

<ul>
	<li>teks <i>miring</i></li>
	<li>teks <i>miring</i></li>
	<li>teks <i>miring</i></li>
	<li>teks <i>miring</i></li>
</ul>

<p>
	teks paragraf <i>miring</i>
</p>
<p>
	teks paragraf <i>miring</i>
</p>

Warnai dengan warna merah teks miring dari tag ul, dan dengan warna hijau - teks miring dari tag p.

Diberikan kode berikut:

<p>
	teks paragraf <b><i>tebal miring</i></b>
</p>
<p>
	teks paragraf <i>miring</i>
</p>

Warnai dengan warna merah teks miring yang berada di dalam tag b, yang pada gilirannya berada di dalam tag p.