ซีเลคเตอร์แบบเพื่อนบ้านใน CSS
ซีเลคเตอร์แบบเพื่อนบ้าน + ช่วยให้เลือก
องค์ประกอบตามเพื่อนบ้านที่อยู่ด้านบนของมัน
ไวยากรณ์
ซีเลคเตอร์1 + ซีเลคเตอร์2 {
}
ตัวอย่าง
มาดูทุกแท็ก p
ที่อยู่ตามหลังแท็ก h2 โดยตรง
และเปลี่ยนสีเป็นสีแดง:
<h2>ข้อความ</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + p {
color: red;
}
:
ตัวอย่าง
มาดูทุกแท็ก p
ที่อยู่ตามหลังองค์ประกอบ
ที่มีคลาส .test โดยตรง และเปลี่ยนสีเป็นสีแดง:
<p class="test">
ข้อความ
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
:
ตัวอย่าง
มาดูทุกองค์ประกอบที่มีคลาส
.elem ที่อยู่ตามหลัง
องค์ประกอบที่มีคลาส .test โดยตรง และ
เปลี่ยนสีเป็นสีแดง:
<p class="test">
ข้อความ
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
:
ดูเพิ่มเติม
-
ซีเลคเตอร์แบบลูก,
ซึ่งช่วยให้เลือกองค์ประกอบตามการซ้อนโดยตรง -
ซีเลคเตอร์แบบตามบริบท,
ซึ่งช่วยให้เลือกองค์ประกอบตามผู้ปกครองของมัน -
ซีเลคเตอร์แบบพี่น้องทั่วไป,
ซึ่งช่วยให้เลือกองค์ประกอบหลังองค์ประกอบที่กำหนด -
ซีเลคเตอร์แบบสากล,
ซึ่งช่วยให้เลือกทุกองค์ประกอบ
