WEBVTT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

00:01:08.364 --> 00:01:12.047
І це спрацює. Таким чином ми матимемо лише
одне правило для цього класу.

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

00:01:14.828 --> 00:01:19.119
адже ми будемо змушені постійно додавати
клас під час створення нового заголовка.

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

00:01:23.935 --> 00:01:25.495
використавши коми.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

00:02:26.582 --> 00:02:28.262
мали однаковий стиль.

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

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