Памылка пры групоўцы складаных CSS селектараў

Усё, што падзелена коскай пры групоўцы, павінна прадстаўляць сабой поўнавартасны селектар. Давайце паглядзім, дзе тут можна памыліцца.

Хай у нас ёсць вось такі код:

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

Давайце згрупуем два селектары ў адзін. Вось правільны варыянт групоўкі:

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

А вось няправільны варыянт групоўкі:

#block h2, h3 {
	color: red;
}

У гэтым няправільным варыянце групоўкі пачаткоўцам чамусьці здаецца, што #block адносіцца і да h2, і да h3, які стаіць пасля коскі. Але селектары не дзейнічаюць праз коску і фактычна гэты няправільны варыянт групоўкі можна перапісаць вось так:

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

Параўнайце з першапачатковым варыянтам, які мы пачалі скарачаць:

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

Спрасціце код, выкарыстоўваючы групоўку селектараў:

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

Спрасціце код, выкарыстоўваючы групоўку селектараў:

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

Спрасціце код, выкарыстоўваючы групоўку селектараў:

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

Спрасціце код, выкарыстоўваючы групоўку селектараў:

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