ซีเลกเตอร์ตามบริบทใน CSS
ซีเลกเตอร์ตามบริบทซึ่งแสดงด้วย
คำสั่งช่องว่าง (' ') ช่วยให้สามารถเลือก
แท็กที่ซ้อนอยู่ในผู้ปกครองที่กำหนดได้
ไวยากรณ์
selector1 selector2 {
}
ตัวอย่าง
มาถึงแท็ก p ทั้งหมด
ภายในแท็ก div และเปลี่ยนสี
เป็นสีแดง:
<div>
<p>
text
</p>
<p>
text
</p>
</div>
div p {
color: red;
}
:
ตัวอย่าง
มาถึงแท็ก p ทั้งหมด
ภายในองค์ประกอบที่มี #elem และเปลี่ยนสี
เป็นสีแดง:
<div id="elem">
<p>
text
</p>
<p>
text
</p>
</div>
#elem p {
color: red;
}
:
ตัวอย่าง
มาถึงแท็ก p ทั้งหมด
ภายในองค์ประกอบที่มีคลาส .block
และเปลี่ยนสีเป็นสีแดง:
<div class="block">
<p>
text
</p>
<p>
text
</p>
</div>
.block p {
color: red;
}
:
ตัวอย่าง
มาถึงแท็ก b ทั้งหมด
ภายในแท็ก p ซึ่งอยู่ภายใน
แท็ก div และเปลี่ยนสีเป็นสีแดง:
<div>
<p>
text <b>+</b>
</p>
</div>
div p b {
color: red;
}
:
ดูเพิ่มเติม
-
ซีเลกเตอร์ลูกโดยตรง,
ซึ่งช่วยให้เลือกองค์ประกอบตามการซ้อนทับโดยตรง -
ซีเลกเตอร์พี่น้องติดกัน,
ซึ่งช่วยให้เลือกองค์ประกอบตามเพื่อนบ้านของมัน -
ซีเลกเตอร์พี่น้องทั่วไป,
ซึ่งช่วยให้เลือกองค์ประกอบหลังจากที่กำหนด -
ซีเลกเตอร์สากล,
ซึ่งช่วยให้เลือกองค์ประกอบทั้งหมด
