Selektor Anak di CSS

Misalkan kita memiliki kode berikut:

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

Misalkan kita ingin memilih semua tag i, yang merupakan turunan dari paragraf. Mari kita lakukan ini:

p i {
	color: red;
}

Hasil eksekusi kode:

Sekarang mari kita pilih tag i, yang merupakan turunan langsung dari paragraf kita. Dalam hal ini, selektor anak > akan membantu kita.

Untuk memahami cara menggunakannya, mari bandingkan dengan selektor turunan. Seperti ini: p i - kita akan memilih semua teks miring di dalam paragraf, dan seperti ini: p > i - hanya teks miring yang merupakan turunan langsung dari paragraf.

Mari terapkan selektor ini ke kode HTML kita:

p > i {
	color: red;
}

Hasil eksekusi kode:

Diberikan kode berikut:

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

Warnai dengan warna merah hanya tag b, yang merupakan turunan langsung dari tag li.