คุณสมบัติทั่วไปเมื่อจัดกลุ่มตัวเลือกใน CSS

บางครั้งก็มีกรณีที่คุณสมบัติบางส่วนของตัวเลือกบางตัว เหมือนกัน แต่บางส่วนก็แตกต่างกัน ในโค้ดต่อไปนี้ เช่น หัวเรื่องและย่อหน้า มีสีแดง แต่สำหรับย่อหน้านอกจากนี้ ยังมีคุณสมบัติอื่นๆ อีก:

h2 {
	color: red;
}
h3 {
	color: red;
}
p {
	color: red;
	text-align: justify;
	font-size: 16px;
}

ในกรณีเช่นนี้ คุณสามารถจัดกลุ่มส่วนที่ซ้ำกัน และเขียนส่วนที่ไม่ซ้ำกัน แยกต่างหาก:

h2, h3, p {
	color: red;
}
p {
	text-align: justify;
	font-size: 16px;
}

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

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

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

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