Errore nel raggruppamento di selettori CSS complessi

Tutto ciò che è separato da una virgola durante il raggruppamento deve rappresentare un selettore completo. Diamo un'occhiata a dove si può sbagliare.

Supponiamo di avere il seguente codice:

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

Raggruppiamo due selettori in uno. Ecco la versione corretta del raggruppamento:

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

Ed ecco la versione errata del raggruppamento:

#block h2, h3 {
	color: red;
}

In questa versione errata del raggruppamento, i principianti per qualche motivo pensano che #block si applichi sia a h2 che a h3 dopo la virgola. Ma i selettori non funzionano attraverso la virgola e infatti questo raggruppamento errato può essere riscritto così:

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

Confrontatelo con la versione originale che abbiamo iniziato a abbreviare:

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

Semplifica il codice utilizzando il raggruppamento dei selettori:

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

Semplifica il codice utilizzando il raggruppamento dei selettori:

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

Semplifica il codice utilizzando il raggruppamento dei selettori:

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

Semplifica il codice utilizzando il raggruppamento dei selettori:

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