Vigane komplekssete CSS-i valijate grupeerimine

Kõik, mis on grupeerimisel komadega eraldatud, peab esindama täieõiguslikku valijat. Vaatame, kus siin võib viga teha.

Oletame, et meil on selline kood:

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

Grupeerime kaks valijat üheks. Siin on õige grupeerimise variant:

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

Ja siin on vale grupeerimise variant:

#block h2, h3 {
	color: red;
}

Selles vales grupeerimise variandis tundub algajatele mingil põhjusel, et #block kehtib nii h2 kui ka h3 järele, mis seisab koma järel. Kuid valijad ei toimi läbi komade ja tegelikult saab seda vale grupeerimise varianti kirjutada ümber nii:

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

Võrdelge seda algse variandiga, mida me hakkasime lühendama:

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

Lihtsustage koodi, kasutades valijate grupeerimist:

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

Lihtsustage koodi, kasutades valijate grupeerimist:

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

Lihtsustage koodi, kasutades valijate grupeerimist:

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

Lihtsustage koodi, kasutades valijate grupeerimist:

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