# Группировка селекторов на CSS

Иногда может возникнуть следующая ситуация: вам нужно сделать одно и то же с разными тегами, например, покрасить все заголовки `h2`, `h3` и абзацы в красный цвет. В этом случае вам придется написать что-то вроде такого:

`h2 { color: red; } h3 { color: red; } p { color: red; }`

Однако, существует способ сделать это немного короче: селекторы тегов можно объединять через запятую и CSS код применится к ним всем одновременно. Приведенный выше код можно переписать покороче таким образом:

`h2, h3, p { color: red; }`

Упростите код, используя группировку селекторов:

`h1 { text-align: center; } h2 { text-align: center; } h3 { text-align: center; }`

## Общие свойства

Бывает такое, что часть свойств некоторых селекторов одинакова, а часть - отличается. В следующем коде, например, заголовки и абзац имеют красный цвет, но у абзаца кроме этого есть еще свойства:

`h2 { color: red; } h3 { color: red; } p { color: red; text-align: justify; font-size: 16px; }`

В таком случае можно сгруппировать повторяющиеся части, а то, что не повторяется, записать отдельно:

`h2, h3, p { color: red; } p { text-align: justify; font-size: 16px; }`

Упростите код, используя группировку селекторов:

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

Упростите код, используя группировку селекторов:

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

## Замечания

Группировать через запятую можно любое количество селекторов тегов, пробел после запятой не имеет значения, можно без него, но с ним код более красивый.

←→
↑