Feil ved gruppering av komplekse CSS-selectorer

Alt som er separert med komma ved gruppering, må representere en fullverdig selector. La oss se på hvor man kan gjøre feil.

La oss si at vi har følgende kode:

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

La oss gruppere to selectorer til én. Her er den riktige varianten av gruppering:

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

Og her er den feilaktige varianten av gruppering:

#block h2, h3 {
	color: red;
}

I denne feilaktige varianten av gruppering synes nybegynnere av en eller annen grunn at #block gjelder både for h2 og for h3 som står etter komma. Men selectorer virker ikke gjennom komma, og faktisk kan denne feilaktige varianten av gruppering omskrives slik:

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

Sammenlign med den opprinnelige varianten som vi begynte å forkorte:

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

Forenkle koden ved å bruke gruppering av selectorer:

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

Forenkle koden ved å bruke gruppering av selectorer:

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

Forenkle koden ved å bruke gruppering av selectorer:

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

Forenkle koden ved å bruke gruppering av selectorer:

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