Błąd podczas grupowania złożonych selektorów CSS

Wszystko, co jest oddzielone przecinkiem podczas grupowania, powinno stanowić pełny selektor. Przyjrzyjmy się, gdzie można popełnić błąd.

Załóżmy, że mamy taki kod:

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

Pogrupujmy dwa selektory w jeden. Oto poprawny wariant grupowania:

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

A oto niepoprawny wariant grupowania:

#block h2, h3 {
	color: red;
}

W tym niepoprawnym wariancie grupowania początkującym z jakiegoś powodu wydaje się, że #block odnosi się zarówno do h2, jak i do h3 stojącego po przecinku. Ale selektory nie działają przez przecinek i faktycznie ten niepoprawny wariant grupowania można przepisać tak:

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

Porównaj z wersją początkową, którą zaczęliśmy skracać:

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

Uprość kod, używając grupowania selektorów:

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

Uprość kod, używając grupowania selektorów:

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

Uprość kod, używając grupowania selektorów:

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

Uprość kod, używając grupowania selektorów:

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