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:

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

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

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

Mana guruhlashning noto'g'ri varianti:

css#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:

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

Biz qisqartira boshlagan boshlang'ich variant bilan solishtiring:

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

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

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

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

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