Fout by die groepering van komplekse CSS selektors

Alles wat deur 'n komma geskei word tydens groepering, moet 'n volwaardige selektor verteenwoordig. Kom ons kyk waar 'n mens hier kan fout maak.

Laat ons die volgende kode hê:

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

Kom ons groepeer die twee selektors in een. Hier is die korrekte manier om te groepeer:

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

En hier is die verkeerde manier om te groepeer:

#block h2, h3 {
	color: red;
}

In hierdie verkeerde groepering dink beginners om een of ander rede dat #block van toepassing is op beide h2 en die h3 wat ná die komma staan. Maar selektors werk nie deur 'n komma nie en hierdie verkeerde groepering kan eintlik so herskryf word:

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

Vergelyk dit met die oorspronklike weergawe waarmee ons begin het om af te kort:

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

Vereenvoudig die kode deur selektorgroepering te gebruik:

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

Vereenvoudig die kode deur selektorgroepering te gebruik:

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

Vereenvoudig die kode deur selektorgroepering te gebruik:

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

Vereenvoudig die kode deur selektorgroepering te gebruik:

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