Eroare la gruparea selectorilor CSS complecși

Tot ceea ce este separat prin virgulă la grupare, trebuie să reprezinte un selector complet. Să vedem unde se poate greși aici.

Să presupunem că avem următorul cod:

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

Să grupăm cei doi selectori într-unul singur. Iată varianta corectă de grupare:

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

Iată varianta incorectă de grupare:

#block h2, h3 {
	color: red;
}

În această variantă incorectă de grupare începătorilor din anumit motiv li se pare că #block se referă atât la h2, cât și la h3, care stă după virgulă. Dar selectorii nu acționează prin virgulă și de fapt această variantă incorectă de grupare poate fi rescrisă astfel:

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

Comparați cu varianta inițială, cu care am început să simplificăm:

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

Simplificați codul, folosind gruparea selectorilor:

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

Simplificați codul, folosind gruparea selectorilor:

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

Simplificați codul, folosind gruparea selectorilor:

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

Simplificați codul, folosind gruparea selectorilor:

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