Mistake when grouping complex CSS selectors

Anything separated by a comma when grouping should be a full selector. Let's see where we can go wrong here.

Let's say we have this code:

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

Let's group two selectors into one. Here's the correct way to group them:

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

And here is the incorrect grouping option:

#block h2, h3 {
	color: red;
}

In this incorrect grouping, for some reason it seems to newbies that #block refers to both h2 and to h3, which is after the comma. But selectors do not work through commas, and in fact this incorrect grouping can be rewritten like this:

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

Compare with the original version, which we started to shorten:

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

Simplify your code by using selector grouping:

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

Simplify your code by using selector grouping:

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

Simplify your code by using selector grouping:

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

Simplify your code by using selector grouping:

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