การเขียนหลายซีเล็กเตอร์ติดกันใน CSS

เพื่อเลือกองค์ประกอบที่ตรงกับหลายซีเล็กเตอร์พร้อมกัน คุณต้องเขียนซีเล็กเตอร์เหล่านั้นติดกัน โดยไม่มีช่องว่าง

ตัวอย่างเช่น ซีเล็กเตอร์ต่อไปนี้จะเลือกองค์ประกอบที่มีคลาส bbb และคลาส zzz พร้อมกัน:

.bbb.zzz {
	
}

และซีเล็กเตอร์ต่อไปนี้จะเลือกหัวเรื่อง h2 ที่มีคลาส bbb และคลาส zzz พร้อมกัน:

h2.bbb.zzz {
	
}

คุณสามารถสร้างโครงสร้างซีเล็กเตอร์ที่ซับซ้อนได้ตามวิธีนี้ ลำดับของซีเล็กเตอร์ที่ใช้ไม่มีความสำคัญ ยกเว้นกฎที่ว่าต้องวางซีเล็กเตอร์ของแท็กไว้ที่ตำแหน่งเริ่มต้นเสมอ

ตัวอย่างเช่น ซีเล็กเตอร์ .bbb.zzz และ .zzz.bbb เท่ากันทุกประการ

นอกจากนี้ยังสามารถสร้างซีเล็กเตอร์โดยใช้ id ได้อีกด้วย เช่น #elem.eee หรือ h2#elem.eee หรือ h2.eee#elem และอื่นๆ

อธิบายว่าซีเล็กเตอร์ในโค้ดด้านล่างเลือกองค์ประกอบใด จากนั้นเขียนโค้ด HTML ที่ตรงกับซีเล็กเตอร์นี้ นี่คือโค้ดที่มีซีเล็กเตอร์:

.bbb.zzz {
	color: red;
}

h2.bbb.zzz {
	color: red;
}

#elem.bbb {
	color: red;
}

#elem.bbb.zzz {
	color: red;
}

h2#elem.bbb {
	color: red;
}