ตัวเลือกแบบลูก (Child Selector) ใน CSS

ตัวเลือกแบบลูก (Child Selector) > ช่วยให้สามารถเลือก องค์ประกอบตามการซ้อนกันโดยตรง ภายในกันและกัน

ไวยากรณ์

selector1 > selector2 {
	
}

ตัวอย่าง

มาเลือกแท็ก b ทั้งหมด ที่อยู่ภายในแท็ก p โดยตรง และเปลี่ยนสีของพวกมันเป็นสีแดง:

<p>
	text <b>+</b>
</p>
<p>
	text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

ตัวอย่าง

มาเลือกแท็ก b ทั้งหมด ที่อยู่ภายในองค์ประกอบ ที่มีคลาส .block โดยตรง และเปลี่ยนสีของพวกมันเป็น สีแดง:

<p class="block">
	text <b>+</b>
</p>
<p class="block">
	text <i><b>-</b></i>
</p>
<p>
	text <b>-</b>
</p>

.block > b {
	color: red;
}

ตัวอย่าง

มาเลือกองค์ประกอบที่มีคลาส .elem ทั้งหมด ที่อยู่ ภายในองค์ประกอบที่มีคลาส .block โดยตรง และเปลี่ยนสีของพวกมันเป็นสีแดง:

<p class="block">
	text <span class="elem">+</span>
</p>
<p class="block">
	text <i><span class="elem">-</span></i>
</p>
<p class="block">
	text <span>-</span>
</p>
<p>
	text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

ดูเพิ่มเติม

ตัวเลือกตามบริบท (Descendant Selector),
ซึ่งช่วยให้คุณเลือกองค์ประกอบตาม parent ของมัน
ตัวเลือก sibling ที่อยู่ติดกัน (Adjacent Sibling Selector),
ซึ่งช่วยให้คุณเลือกองค์ประกอบตาม sibling ของมัน
ตัวเลือก sibling ทั่วไป (General Sibling Selector),
ซึ่งช่วยให้คุณเลือกองค์ประกอบที่อยู่หลังองค์ประกอบที่กำหนด
ตัวเลือกสากล (Universal Selector),
ซึ่งช่วยให้คุณเลือกองค์ประกอบทั้งหมด