Күрделі 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;
}