Я люблю художні музеї. Але я не маю часу
ходити туди щодня.

Але, на щастя, я можу знайти прекрасні
картини в Інтернеті.

Наприклад, тут, на сайті Khan Academy,
в розділі історії.

Я зробила цю сторінку зі списком
відомих картин,

одним заголовком, списком для кожного
художнього стилю і посиланнями на статті

про кожну з картин.

Щоб зробити сторінку гарнішою,
в більш художньому стилі,

я застосувала правила CSS, щоб змінити
шрифт обох заголовків — h1 та h2.

Мені подобається курсив, але я думаю шрифт
"fantasy" виглядатиме краще,

тому я його зараз зміню.

Оу, і я маю змінити його тут, тому що
ми маємо два правила.

Але насправді я хочу, щоб усі заголовки
на сторінці мали однаковий вид шрифту,

і я не хочу змінювати шрифти щоразу у двох
місцях, коли змінюватиму свою думку.

Яким буде рішення? Нам потрібно замінити
два правила CSS одним.

Хм... подумайте хвилинку.

Ви, можливо, запропонуєте створити один
клас для обох заголовків.

І це спрацює. Таким чином ми матимемо лише
одне правило для цього класу.

Але, по суті, це збільшить обсяг роботи,

адже ми будемо змушені постійно додавати
клас під час створення нового заголовка.

На щастя, є кращий спосіб. Ми можемо
згрупувати селектори разом,

використавши коми.

Ми всього лиш додамо кому після "h1", тут, 
і далі напишемо "h2".

І тепер ми можемо видалити це інше правило,
оскільки ми об'єднали його з першим.

І та-дам! Наша сторінка не змінилась!

Тепер, коли я захочу поекспериментувати
з шрифтами, я можу це робити в одному місці.

Тут я зміню його назад на курсив, 
і тепер всі заголовки написані курсивом.

Добре запам'ятайте, що селектори мають
бути розділені саме комою, а не пробілом.

Як ми вже знаємо, пробіл використовується
для селектора нащадка

і означає дещо зовсім інше в CSS.

Групування селекторів - це хороший засіб
зменшити кількість селекторів.

Але використовуйте їх в міру. Вам не слід 
групувати селектори лише тому,

що зараз вони мають однакові властивості.

Ви маєте групувати ті селектори, які завжди
мають мати однакові властивості.

Переважно тому, що семантично вони є 
дуже близькими один до одного.

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

мали однаковий стиль.

Залишайтесь зі мною, щоб дізнатись, як ще 
ми можемо використовувати групові селектори.

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"