Грешка при групписању сложених 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;
}