Gabim gjatë grupimit të selektorëve kompleksë CSS

Gjithçka e ndarë me presje gjatë grupimit, duhet të përfaqësojë një selektor të plotë. Le të shohim se ku mund të gabohemi këtu.

Le të themi se kemi kodin e mëposhtëm:

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

Le të grupojmë dy selektorë në një. Këtu është varianti i saktë i grupimit:

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

Dhe këtu është varianti i gabuar i grupimit:

#block h2, h3 {
	color: red;
}

Në këtë variant të gabuar të grupimit, fillestarëve për disa arsye u duket se #block vlen si për h2, ashtu edhe për h3, që qëndron pas presjes. Por selektorët nuk veprojnë përmes presjes dhe në fakt ky variant i gabuar i grupimit mund të rishkruhet kështu:

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

Krahasoni me variantin fillestar, të cilin kemi filluar ta shkurtojmë:

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

Thjeshtoni kodin, duke përdorur grupimin e selektorëve:

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

Thjeshtoni kodin, duke përdorur grupimin e selektorëve:

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

Thjeshtoni kodin, duke përdorur grupimin e selektorëve:

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

Thjeshtoni kodin, duke përdorur grupimin e selektorëve:

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