CSSда селекторларни гуруҳлашда умумий хусусиятлар

Бaъзи селекторларнинг хусусиятларининг бир қисми бир хил, бир қисми esa фарқ қиладиган бўлиши мумкин. Мисол учун, куйидаги кодда сарлавҳалар ва абзац қизил рангда, лекин абзацда бундан ташқари яна қўшимча хусусиятлар мавжуд:

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;
}