Mürəkkəb CSS Selektoru Qruplaşdırma Xətası

Qruplaşdırma zamanı vergüllə ayrılan hər şey tam hüquqlu selektor olmalıdır. Gəlin, burada harada səhv etmək olacağına baxaq.

Tutaq ki, bizim belə bir kodumuz var:

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

Gəlin iki selektoru birində qruplaşdıraq. Budur düzgün qruplaşdırma variantı:

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

Budur isə səhv qruplaşdırma variantı:

#block h2, h3 {
	color: red;
}

Bu səhv qruplaşdırma variantında yeni başlayanlara nədənsə elə gəlir ki, #block həm h2, həm də vergüldən sonra gələn h3 üçün keçərlidir. Lakin selektorlar vergül vasitəsilə bir-birinə təsir etmir və əslində bu səhv qruplaşdırma variantını belə yenidən yazmaq olar:

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

Sadələşdirməyə başladığımız ilkin variantla müqayisə edin:

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

Selektor qruplaşdırmasından istifadə edərək kodu sadələşdirin:

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

Selektor qruplaşdırmasından istifadə edərək kodu sadələşdirin:

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

Selektor qruplaşdırmasından istifadə edərək kodu sadələşdirin:

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

Selektor qruplaşdırmasından istifadə edərək kodu sadələşdirin:

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