Greška pri grupisanju složenih CSS selektora

Sve što je razdvojeno zarezom pri grupisanju, mora predstavljati punovredan selektor. Hajde da pogledamo gde se ovde može pogrešiti.

Neka imamo ovakav kod:

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

Hajde da grupišemo dva selektora u jedan. Evo ispravne varijante grupisanja:

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

A evo neispravne varijante grupisanja:

#block h2, h3 {
	color: red;
}

U ovoj neispravnoj varijanti grupisanja početnicima iz nekog razloga izgleda da se #block odnosi i na h2, i na h3 koji stoji posle zareza. Ali selektori ne deluju preko zareza i zapravo se ova neispravna varijanta grupisanja može prepisati ovako:

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

Uporedite sa početnom varijantom, koju smo počeli da skraćujemo:

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

Pojednostavite kod, koristeći grupisanje selektora:

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

Pojednostavite kod, koristeći grupisanje selektora:

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

Pojednostavite kod, koristeći grupisanje selektora:

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

Pojednostavite kod, koristeći grupisanje selektora:

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