การรวมกันของตัวเลือก CSS

	เตอร์รวมกันแสดงให้เห็นถึงความสัมพันธ์โดยตรงระหว่างสองเตอร์

ตัวเลือก CSS รวมถึงการรวมกันของชุดต่างๆของเตอร์ง่ายๆ

ใน CSS3 มันมีสี่ชุดที่:

ลูกหลานตัวเลือก

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

ตัวอย่างต่อไปนี้เลือกทั้งหมด <p> องค์ประกอบเข้าไปใน <div>:

div p
{
background-color:yellow;
}

เมื่อเทียบกับลูกหลานเตอร์ย่อยเตอร์ (selectors เด็ก) สามารถเลือกองค์ประกอบที่เป็นองค์ประกอบของธาตุเด็ก ๆ

ตัวอย่างต่อไปนี้เลือก <div> ในทุกองค์ประกอบของเด็กโดยตรง <p>:

div>p
{
background-color:yellow;
}

ที่อยู่ติดกันเลือกพี่น้อง (เลือกพี่น้องที่อยู่ติดกัน) ให้เลือกองค์ประกอบอื่นทันทีหลังจากองค์ประกอบและทั้งสองมีองค์ประกอบหลักเดียวกัน

ถ้าคุณต้องเลือกองค์ประกอบอื่นทันทีหลังจากองค์ประกอบและทั้งสองมีองค์ประกอบหลักเดียวกันคุณสามารถใช้ตัวเลือกพี่น้องที่อยู่ติดกัน (อยู่ติดเลือกพี่น้อง)

ตัวอย่างต่อไปนี้เลือกทั้งหมดคนแรกในองค์ประกอบ <div> หลังจาก <p> องค์ประกอบ:

div+p
{
background-color:yellow;
}

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

ตัวอย่างต่อไปนี้เลือกทั้งหมด <div> องค์ประกอบของพี่น้องที่อยู่ติดกัน <p>:

div~p
{
background-color:yellow;
}