Erreur lors du regroupement de sélecteurs CSS complexes

Tout ce qui est séparé par une virgule lors d'un regroupement doit représenter un sélecteur complet. Voyons où il est possible de se tromper.

Supposons que nous ayons le code suivant :

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

Regroupons maintenant les deux sélecteurs en un. Voici la bonne méthode de regroupement :

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

Et voici la mauvaise méthode de regroupement :

#block h2, h3 {
	color: red;
}

Dans cette mauvaise méthode de regroupement, les débutants pensent, on ne sait pourquoi, que #block s'applique à la fois au h2 et au h3 situé après la virgule. Mais les sélecteurs n'agissent pas à travers la virgule et, en réalité, cette mauvaise méthode de regroupement peut être réécrite ainsi :

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

Comparez avec la version initiale que nous avons commencé à raccourcir :

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

Simplifiez le code en utilisant le regroupement de sélecteurs :

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

Simplifiez le code en utilisant le regroupement de sélecteurs :

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

Simplifiez le code en utilisant le regroupement de sélecteurs :

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

Simplifiez le code en utilisant le regroupement de sélecteurs :

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