Групування складних селекторів

Нехай у нас є два наступні селектори:

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

Так як ці селектори роблять одне й те ж саме, їх можна згрупувати через кому:

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

Помилка новачків

Все, що розділено комою під час групування, має бути повноцінним селектором. Давайте подивимося, де можна помилитися.

Нехай ми маємо ось такий код:

#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;
}