Грешка при групирање на сложени 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;
}