# Ошибка при группировке сложных 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; }`
← →
↑