Грешка при групиране на сложни CSS селектори

Всичко, разделено със запетая при групиране, трябва да представлява пълноценен селектор. Нека да видим къде може да се сгреши.

Нека имаме следния код:

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

Нека групираме двата селектора в един. Ето правилният вариант на групиране:

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

Ето неправилният вариант на групиране:

#block h2, h3 {
	color: red;
}

В този неправилен вариант на групиране на начинаещите по някаква причина им се струва, че #block се отнася и за h2, и за h3, стоящ след запетаята. Но селекторите не действат чрез запетая и всъщност този неправилен вариант на групиране може да се пренапише ето така:

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