CSS combinators

	Combinator เป็นสิ่งที่อธิบายความสัมพันธ์ระหว่างเตอร์ที่

ตัวเลือก CSS สามารถมีมากกว่าหนึ่งตัวเลือกที่ง่าย ระหว่างเตอร์ง่ายเราสามารถรวม Combinator

มีสี่ combinators แตกต่างกันใน CSS3 คือ:

เลือกลูกหลาน

เลือกลูกหลานตรงกับองค์ประกอบทั้งหมดที่เป็นลูกหลานขององค์ประกอบที่ระบุ

ตัวอย่างต่อไปนี้เลือกทั้งหมด <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;
}