Pemilih Anak dalam CSS

Katakan kita mempunyai kod berikut:

<p>
	teks <b><i>tebal condong</i></b>
</p>
<p>
	teks <i>hanya condong</i>
</p>

Katakan kita ingin memilih semua tag i, yang merupakan keturunan perenggan. Mari lakukan ini:

p i {
	color: red;
}

Hasil pelaksanaan kod:

Sekarang mari kita pilih tag i, yang merupakan anak langsung perenggan kita. Pemilih anak > akan membantu kita dalam hal ini.

Untuk memahami cara menggunakannya, mari bandingkannya dengan pemilih keturunan. Seperti ini: p i - kita akan memilih semua teks condong di dalam perenggan, tetapi seperti ini: p > i - hanya teks condong yang merupakan anak langsung perenggan.

Mari gunakan pemilih ini pada kod HTML kita:

p > i {
	color: red;
}

Hasil pelaksanaan kod:

Diberi kod berikut:

<ul>
	<li>
		<i>condong</i>
		<b>tebal</b>
		<b><i>tebal condong</i></b>
	</li>
	<li>
		<i>condong</i>
		<b>tebal</b>
		<b><i>tebal condong</i></b>
	</li>
</ul>

Warnakan dengan warna merah hanya tag b, yang merupakan anak langsung tag li.