ข้อผิดพลาดในการจัดกลุ่มตัวเลือก CSS ที่ซับซ้อน

ทุกสิ่งที่คั่นด้วยเครื่องหมายจุลภาคเมื่อจัดกลุ่ม ควรเป็นตัวเลือกที่สมบูรณ์ มาดูกันว่าสามารถทำผิดพลาดตรงไหนได้บ้าง

สมมติว่าเรามีโค้ดดังนี้:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

ลองจัดกลุ่มตัวเลือกสองตัวให้เป็นตัวเลือกเดียว นี่คือวิธีจัดกลุ่มที่ถูกต้อง:

#block h2, #block h3 {
	color: red;
}

และนี่คือวิธีจัดกลุ่มที่ไม่ถูกต้อง:

#block h2, h3 {
	color: red;
}

ในวิธีจัดกลุ่มที่ไม่ถูกต้องนี้ มือใหม่มักคิดว่า #block ใช้กับทั้ง h2 และ h3 ที่อยู่ หลังเครื่องหมายจุลภาค แต่ตัวเลือกไม่ทำงาน ผ่านเครื่องหมายจุลภาค และที่จริงแล้ว วิธีจัดกลุ่มที่ไม่ถูกต้องนี้สามารถเขียนใหม่ได้ดังนี้:

#block h2 {
	color: red;
}
h3 {
	color: red;
}

เปรียบเทียบกับวิธีเริ่มต้นที่ เราเริ่มต้นจะย่อ:

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

ทำให้โค้ดง่ายขึ้นโดยใช้การจัดกลุ่มตัวเลือก:

#block h1 {
	text-align: center;
}
#block h2 {
	text-align: center;
	color: blue;
}
#block h3 {
	text-align: center;
	font-size: 16px;
	color: red;
}

ทำให้โค้ดง่ายขึ้นโดยใช้การจัดกลุ่มตัวเลือก:

#block h1.eee {
	text-align: center;
	font-size: 30px;
}
#block h2.zzz {
	text-align: center;
	font-size: 20px;
}

ทำให้โค้ดง่ายขึ้นโดยใช้การจัดกลุ่มตัวเลือก:

.xxx .kkk {
	text-align: center;
}
.eee h2.zzz {
	text-align: center;
}
#eee h2 {
	text-align: center;
}

ทำให้โค้ดง่ายขึ้นโดยใช้การจัดกลุ่มตัวเลือก:

.eee h2.zzz {
	text-align: center;
}
.xxx {
	text-align: center;
}