Fout bij het groeperen van complexe CSS-selectors

Alles wat gescheiden is door een komma bij groepering, moet een volledige selector zijn. Laten we kijken waar je hier een fout kunt maken.

Stel dat we de volgende code hebben:

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

Laten we twee selectors in één groeperen. Hier is de correcte manier van groeperen:

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

En hier is de incorrecte manier van groeperen:

#block h2, h3 {
	color: red;
}

In deze incorrecte groepering denken beginners om de een of andere reden dat #block van toepassing is op zowel h2 als h3 die na de komma staat. Maar selectors werken niet door een komma en feitelijk kan deze incorrecte groepering als volgt worden herschreven:

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

Vergelijk dit met de oorspronkelijke versie die we probeerden in te korten:

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

Vereenvoudig de code door groepering van selectors te gebruiken:

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

Vereenvoudig de code door groepering van selectors te gebruiken:

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

Vereenvoudig de code door groepering van selectors te gebruiken:

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

Vereenvoudig de code door groepering van selectors te gebruiken:

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