ซีเล็คเตอร์ลูกใน CSS

สมมติว่าเรามีโค้ดต่อไปนี้:

<p>
	ข้อความ <b><i>ตัวหนา ตัวเอียง</i></b>
</p>
<p>
	ข้อความ <i>แค่ตัวเอียง</i>
</p>

สมมติว่าเราต้องการเลือกแท็ก i ทั้งหมด ที่เป็นลูกหลานของย่อหน้า มาทำกัน:

p i {
	color: red;
}

ผลลัพธ์จากการรันโค้ด:

คราวนี้มาเลือกแท็ก i ที่เป็นลูกโดยตรงของย่อหน้าของเรากัน ซีเล็คเตอร์ลูก > จะช่วยเราในเรื่องนี้

เพื่อให้เข้าใจวิธีการใช้ มาลองเปรียบเทียบ กับซีเล็คเตอร์ลูกหลานกัน แบบนี้: p i - เราจะเลือกตัวเอียงทั้งหมดภายใน ย่อหน้า แต่แบบนี้: p > i - จะเลือกแค่ ตัวเอียงที่เป็นลูกโดยตรงของย่อหน้าเท่านั้น

ลองใช้ซีเล็คเตอร์นี้กับโค้ด HTML ของเราดู:

p > i {
	color: red;
}

ผลลัพธ์จากการรันโค้ด:

โค้ดต่อไปนี้กำหนดให้:

<ul>
	<li>
		<i>ตัวเอียง</i>
		<b>ตัวหนา</b>
		<b><i>ตัวหนา ตัวเอียง</i></b>
	</li>
	<li>
		<i>ตัวเอียง</i>
		<b>ตัวหนา</b>
		<b><i>ตัวหนา ตัวเอียง</i></b>
	</li>
</ul>

ให้ระบายสีแดงเฉพาะแท็ก b ที่เป็ นลูกโดยตรงของแท็ก li เท่านั้น