Kļūda, grupējot sarežģītus CSS selektorus

Viss, kas atdalīts ar komatu grupēšanas laikā, jābūt pilnvērtīgam selektoram. Paskatīsimies, kur šeit var kļūdīties.

Pieņemsim, ka mums ir šāds kods:

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

Tagad sagrupēsim divus selektorus vienā. Šeit ir pareizais grupēšanas variants:

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

Un šeit ir nepareizais grupēšanas variants:

#block h2, h3 {
	color: red;
}

Šajā nepareizajā grupēšanas variantā iesācējiem kādu iemeslu dēļ šķiet, ka #block attiecas gan uz h2, gan uz h3, kas stāv aiz komata. Bet selektori nedarbojas caur komatu, un faktiski šo nepareizo grupēšanas variantu var pārrakstīt šādi:

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

Salīdziniet ar sākotnējo variantu, kuru mēs sākām saīsināt:

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

Vienkāršojiet kodu, izmantojot selektoru grupēšanu:

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

Vienkāršojiet kodu, izmantojot selektoru grupēšanu:

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

Vienkāršojiet kodu, izmantojot selektoru grupēšanu:

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

Vienkāršojiet kodu, izmantojot selektoru grupēšanu:

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