Chyba pri zoskupovaní zložitých CSS selektorov

Všetko, čo je oddelené čiarkou pri zoskupovaní, musí predstavovať plnohodnotný selektor. Pozrime sa, kde sa tu dá chybovať.

Majme takýto kód:

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

Zoskupme dva selektory do jedného. Tu je správny variant zoskupenia:

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

A tu je nesprávny variant zoskupenia:

#block h2, h3 {
	color: red;
}

V tomto nesprávnom variante zoskupenia sa začiatočníkom z nejakého dôvodu zdá, že #block sa vzťahuje aj na h2, aj na h3 stojaci za čiarkou. Ale selektory nepôsobia cez čiarku a v skutočnosti tento nesprávny variant zoskupenia sa dá prepísať takto:

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

Porovnajte s pôvodným variantom, ktorý sme začali skracovať:

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

Zjednodušte kód pomocou zoskupenia selektorov:

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

Zjednodušte kód pomocou zoskupenia selektorov:

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

Zjednodušte kód pomocou zoskupenia selektorov:

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

Zjednodušte kód pomocou zoskupenia selektorov:

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