Բարդ 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;
}