CSS Combinators
CSS Combinators
Combinator คือสิ่งที่อธิบายความสัมพันธ์ระหว่างตัวเลือก
ตัวเลือก CSS สามารถมีได้มากกว่าหนึ่งตัวเลือกอย่างง่าย ระหว่างตัวเลือกอย่างง่าย เราสามารถรวมตัวรวมเข้าด้วยกันได้
มีตัวรวมสี่ตัวที่แตกต่างกันใน CSS:
- ตัวเลือกลูกหลาน (ช่องว่าง)
- ตัวเลือกลูก (>)
- ตัวเลือกพี่น้องที่อยู่ติดกัน (+)
- ตัวเลือกพี่น้องทั่วไป (~)
ตัวเลือกลูกหลาน
ตัวเลือกลูกหลานจะจับคู่องค์ประกอบทั้งหมดที่เป็นลูกหลานขององค์ประกอบที่ระบุ
ตัวอย่างต่อไปนี้เลือกทั้งหมด <p> องค์ประกอบภายใน <div> องค์ประกอบ:
ตัวอย่าง
div p {
background-color: yellow;
}
ตัวเลือกย่อย (>)
ตัวเลือกลูกจะเลือกองค์ประกอบทั้งหมดที่เป็นลูกขององค์ประกอบที่ระบุ
ตัวอย่างต่อไปนี้เลือกทั้งหมด <p> องค์ประกอบที่เป็นลูกของ <div> องค์ประกอบ:
ตัวอย่าง
div > p {
background-color: yellow;
}
ตัวเลือกพี่น้องที่อยู่ติดกัน (+)
ตัวเลือกพี่น้องที่อยู่ติดกันใช้เพื่อเลือกองค์ประกอบที่อยู่ถัดจากองค์ประกอบเฉพาะอื่นโดยตรง
องค์ประกอบของพี่น้องจะต้องมีองค์ประกอบหลักเหมือนกัน และ "ที่อยู่ติดกัน" หมายถึง "ติดตามทันที"
ตัวอย่างต่อไปนี้เลือกองค์ประกอบ <p> แรกที่วางไว้หลังองค์ประกอบ <div>:
ตัวอย่าง
div + p {
background-color: yellow;
}
ตัวเลือกพี่น้องทั่วไป (~)
ตัวเลือกพี่น้องทั่วไปเลือกองค์ประกอบทั้งหมดที่เป็นพี่น้องถัดไปขององค์ประกอบที่ระบุ
ตัวอย่างต่อไปนี้จะเลือกทั้งหมด <p> องค์ประกอบที่เป็นพี่น้องถัดไปของ <div> องค์ประกอบ:
ตัวอย่าง
div ~ p {
background-color: yellow;
}
ตัวเลือก CSS Combinator ทั้งหมด
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |