Murakkab CSS selektorlarini guruhlashda xato

Guruhlashda vergul bilan ajratilgan hamma narsa to'liq qurilgan selektor bo'lishi kerak. Keling, qayerda xato qilish mumkinligini ko'rib chiqaylik.

Faraz qilaylik, bizda quyidagi kod mavjud:

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

Keling, ikkita selektorni bitta guruhga ajratamiz. Mana guruhlashning to'g'ri varianti:

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

Mana guruhlashning noto'g'ri varianti:

#block h2, h3 {
	color: red;
}

Ushbu noto'g'ri guruhlash variantida yangi boshlanuvchilar, nima sababdan bilmaysiz, #block h2 ga ham, verguldan keyin turgan h3 ga ham taalluqli deb o'ylashadi. Ammo selektorlar vergul orqali ta'sir o'tkazmaydi va aslida bu noto'g'ri guruhlash variantini quyidagicha qayta yozish mumkin:

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

Biz qisqartira boshlagan boshlang'ich variant bilan solishtiring:

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

Selektorlarni guruhlashdan foydalanib, kodni soddalashtiring:

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

Selektorlarni guruhlashdan foydalanib, kodni soddalashtiring:

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

Selektorlarni guruhlashdan foydalanib, kodni soddalashtiring:

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

Selektorlarni guruhlashdan foydalanib, kodni soddalashtiring:

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