Мураккаб CSS селекторларини гуруҳлашда хатолик

Гуруҳлашда vergul билан ажратилган ҳар бир нарса тулақонли селектор бўлиши керак. Ку́райлик, бу ерда қаерда хатолikka йўл кўйиш мумкин.

Фарз қилайлик, бизда шундай код бор:

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

Келгила, икки селекторни биттага гуруҳлаймиз. Мана гуруҳлашнинг тўғри варианти:

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

Ва мана гуруҳлашнинг нотўғри варианти:

#block h2, h3 {
	color: red;
}

Ушбу нотўғри гуруҳлаш вариантида ёнгибошларга нима сабабдан #block h2 ҳам, verguldan кейин турган h3 ҳам тегишли бўлиб кўринади. Аммо селекторлар vergul орқали таъсир кўрсатмайди ва амалда ушбу нотўғри гуруҳлаш вариантини шундай ёзиш мумкин:

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