0:00:00.665,0:00:04.776
Я люблю художні музеї. Але я не маю часу[br]ходити туди щодня.

0:00:04.776,0:00:07.987
Але, на щастя, я можу знайти прекрасні[br]картини в Інтернеті.

0:00:07.987,0:00:11.278
Наприклад, тут, на сайті Khan Academy,[br]в розділі історії.

0:00:11.278,0:00:14.340
Я зробила цю сторінку зі списком[br]відомих картин,

0:00:14.340,0:00:19.458
одним заголовком, списком для кожного[br]художнього стилю і посиланнями на статті

0:00:19.458,0:00:21.318
про кожну з картин.

0:00:21.318,0:00:25.164
Щоб зробити сторінку гарнішою,[br]в більш художньому стилі,

0:00:25.164,0:00:31.149
я застосувала правила CSS, щоб змінити[br]шрифт обох заголовків — h1 та h2.

0:00:31.149,0:00:35.886
Мені подобається курсив, але я думаю шрифт[br]"fantasy" виглядатиме краще,

0:00:35.886,0:00:38.886
тому я його зараз зміню.

0:00:38.886,0:00:43.846
Оу, і я маю змінити його тут, тому що[br]ми маємо два правила.

0:00:43.846,0:00:49.262
Але насправді я хочу, щоб усі заголовки[br]на сторінці мали однаковий вид шрифту,

0:00:49.262,0:00:54.414
і я не хочу змінювати шрифти щоразу у двох[br]місцях, коли змінюватиму свою думку.

0:00:54.414,0:01:00.020
Яким буде рішення? Нам потрібно замінити[br]два правила CSS одним.

0:01:00.020,0:01:04.038
Хм... подумайте хвилинку.

0:01:04.038,0:01:08.364
Ви, можливо, запропонуєте створити один[br]клас для обох заголовків.

0:01:08.364,0:01:12.047
І це спрацює. Таким чином ми матимемо лише[br]одне правило для цього класу.

0:01:12.047,0:01:14.828
Але, по суті, це збільшить обсяг роботи,

0:01:14.828,0:01:19.119
адже ми будемо змушені постійно додавати[br]клас під час створення нового заголовка.

0:01:19.119,0:01:23.935
На щастя, є кращий спосіб. Ми можемо[br]згрупувати селектори разом,

0:01:23.935,0:01:25.495
використавши коми.

0:01:25.495,0:01:31.970
Ми всього лиш додамо кому після "h1", тут, [br]і далі напишемо "h2".

0:01:31.970,0:01:37.262
І тепер ми можемо видалити це інше правило,[br]оскільки ми об'єднали його з першим.

0:01:37.262,0:01:39.947
І та-дам! Наша сторінка не змінилась!

0:01:39.947,0:01:44.272
Тепер, коли я захочу поекспериментувати[br]з шрифтами, я можу це робити в одному місці.

0:01:44.272,0:01:48.679
Тут я зміню його назад на курсив, [br]і тепер всі заголовки написані курсивом.

0:01:48.679,0:01:55.765
Добре запам'ятайте, що селектори мають[br]бути розділені саме комою, а не пробілом.

0:01:55.765,0:02:00.046
Як ми вже знаємо, пробіл використовується[br]для селектора нащадка

0:02:00.046,0:02:03.046
і означає дещо зовсім інше в CSS.

0:02:03.046,0:02:08.516
Групування селекторів - це хороший засіб[br]зменшити кількість селекторів.

0:02:08.516,0:02:11.345
Але використовуйте їх в міру. Вам не слід [br]групувати селектори лише тому,

0:02:11.345,0:02:14.345
що зараз вони мають однакові властивості.

0:02:14.345,0:02:18.365
Ви маєте групувати ті селектори, які завжди[br]мають мати однакові властивості.

0:02:18.365,0:02:21.887
Переважно тому, що семантично вони є [br]дуже близькими один до одного.

0:02:21.887,0:02:26.582
В цьому випадку, мій селектор стосується усіх[br]заголовків. А я хочу, щоб вони усі

0:02:26.582,0:02:28.262
мали однаковий стиль.

0:02:28.262,0:02:32.895
Залишайтесь зі мною, щоб дізнатись, як ще [br]ми можемо використовувати групові селектори.

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