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

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

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

css.bbb.zzz {
  
}

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

cssh2.bbb.zzz {
  
}

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

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

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

Задание 1

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

css.bbb.zzz {
  color: red;
}
Задание 2

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

cssh2.bbb.zzz {
  color: red;
}
Задание 3

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

css#elem.bbb {
  color: red;
}
Задание 4

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

css#elem.bbb.zzz {
  color: red;
}
Задание 5

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

cssh2#elem.bbb {
  color: red;
}