Хато дар гурӯҳбандии селекторҳои мураккаби 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;
}