Napaka pri združevanju zapletenih CSS selektorjev

Vse, kar je ločeno z vejico pri združevanju, mora predstavljati popoln selektor. Poglejmo, kje lahko pride do napake.

Recimo, da imamo takšno kodo:

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

Zdaj združimo dva selektorja v enega. To je pravilna različica združevanja:

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

To pa je nepravilna različica združevanja:

#block h2, h3 {
	color: red;
}

V tej nepravilni različici združevanja se začetnikom iz neznanega razloga zdi, da #block velja tako za h2 kot za h3, ki stoji za vejico. Vendar selektorji ne delujejo skozi vejico in dejansko lahko to nepravilno različico združevanja prepišemo takole:

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

Primerjajte s prvotno različico, ki smo jo začeli skrajševati:

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

Poenostavite kodo z uporabo združevanja selektorjev:

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

Poenostavite kodo z uporabo združevanja selektorjev:

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

Poenostavite kodo z uporabo združevanja selektorjev:

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

Poenostavite kodo z uporabo združevanja selektorjev:

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