Татаал 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;
}