Chyba při seskupování složitých CSS selektorů

Všechno, co je oddělené čárkou při seskupování, musí představovat plnohodnotný selektor. Podívejme se, kde lze zde udělat chybu.

Předpokládejme, že máme následující kód:

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

Pojďme seskupit dva selektory do jednoho. Zde je správná varianta seskupení:

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

A zde je nesprávná varianta seskupení:

#block h2, h3 {
	color: red;
}

V této nesprávné variantě seskupení začátečníkům z nějakého důvodu připadá, že #block se vztahuje jak na h2, tak na h3 stojící za čárkou. Ale selektory nepůsobí přes čárku a ve skutečnosti lze toto nesprávné seskupení přepsat následovně:

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

Porovnejte s původní variantou, kterou jsme začali zkracovat:

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

Zjednodušte kód pomocí seskupování selektorů:

#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 pomocí seskupování selektorů:

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

Zjednodušte kód pomocí seskupování selektorů:

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

Zjednodušte kód pomocí seskupování selektorů:

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