Fejl ved gruppering af komplekse CSS-selektorer

Alt, der er adskilt med komma ved gruppering, skal repræsentere en fuldstændig selector. Lad os se, hvor man kan lave en fejl her.

Lad os sige, at vi har følgende kode:

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

Lad os gruppere to selektorer til én. Her er den korrekte variant af grupperingen:

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

Og her er den forkerte variant af grupperingen:

#block h2, h3 {
	color: red;
}

I denne forkerte variant af gruppering synes begyndere af en eller anden grund, at #block refererer til både h2 og h3, som står efter kommaet. Men selektorer virker ikke igennem komma, og faktisk kan denne forkerte variant af gruppering omskrives sådan her:

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

Sammenlign med den oprindelige variant, som vi startede med at forkorte:

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

Forenkl koden ved at bruge gruppering af selektorer:

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

Forenkl koden ved at bruge gruppering af selektorer:

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

Forenkl koden ved at bruge gruppering af selektorer:

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

Forenkl koden ved at bruge gruppering af selektorer:

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