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

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

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

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

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

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

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

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

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

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

Биз қисқартира бошлаган бошланғич вариант билан солиштиринг:

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