Fel vid gruppering av komplexa CSS-selektorer

Allt som är separerat med kommatecken vid gruppering måste utgöra en fullständig selektor. Låt oss titta på var det är lätt att göra fel.

Låt oss säga att vi har följande kod:

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

Låt oss gruppera två selektorer till en. Här är det korrekta sättet att gruppera på:

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

Och här är det felaktiga sättet att gruppera på:

#block h2, h3 {
	color: red;
}

I den här felaktiga grupperingsvarianten verkar nybörjare av någon anledning tro att #block gäller för både h2 och h3 som står efter kommatecknet. Men selektorer fungerar inte över kommatecken och faktiskt kan denna felaktiga grupperingsvariant skrivas om så här:

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

Jämför med den ursprungliga versionen som vi började förkorta:

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

Förenkla koden genom att använda selektorgruppering:

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

Förenkla koden genom att använda selektorgruppering:

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

Förenkla koden genom att använda selektorgruppering:

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

Förenkla koden genom att använda selektorgruppering:

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