Klaida grupuojant sudėtingus CSS selektorius

Viskas, kas atskirta kableliu grupuojant, turi būti pilnaverčiu selektoriumi. Pažiūrėkime, kur čia galima suklysti.

Tarkime, kad turime tokį kodą:

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

Sugrupuokime du selektorius į vieną. Štai teisingas grupavimo variantas:

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

O štai neteisingas grupavimo variantas:

#block h2, h3 {
	color: red;
}

Šiame neteisingame grupavimo variante pradedantiesiems kažkodėl atrodo, kad #block taikomas ir h2, ir h3, stovinčiam po kablelio. Bet selektoriai neveikia per kablelį ir faktiškai šį neteisingą grupavimo variantą galima perrašyti taip:

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

Palyginkite su pradiniu variantu, kurį mes pradėjome sutrumpinti:

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

Supaprastinkite kodą, naudodami selektorių grupavimą:

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

Supaprastinkite kodą, naudodami selektorių grupavimą:

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

Supaprastinkite kodą, naudodami selektorių grupavimą:

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

Supaprastinkite kodą, naudodami selektorių grupavimą:

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