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

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

3
00:00:07,987 --> 00:00:11,278
Наприклад, тут, на сайті Khan Academy,
в розділі історії.

4
00:00:11,278 --> 00:00:14,340
Я зробила цю сторінку зі списком
відомих картин,

5
00:00:14,340 --> 00:00:19,458
одним заголовком, списком для кожного
художнього стилю і посиланнями на статті

6
00:00:19,458 --> 00:00:21,318
про кожну з картин.

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

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

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

10
00:00:35,886 --> 00:00:38,886
тому я його зараз зміню.

11
00:00:38,886 --> 00:00:43,846
Оу, і я маю змінити його тут, тому що
ми маємо два правила.

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

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

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

15
00:01:00,020 --> 00:01:04,038
Хм... подумайте хвилинку.

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

17
00:01:08,364 --> 00:01:12,047
І це спрацює. Таким чином ми матимемо лише
одне правило для цього класу.

18
00:01:12,047 --> 00:01:14,828
Але, по суті, це збільшить обсяг роботи,

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

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

21
00:01:23,935 --> 00:01:25,495
використавши коми.

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

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

24
00:01:37,262 --> 00:01:39,947
І та-дам! Наша сторінка не змінилась!

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

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

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

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

29
00:02:00,046 --> 00:02:03,046
і означає дещо зовсім інше в CSS.

30
00:02:03,046 --> 00:02:08,516
Групування селекторів - це хороший засіб
зменшити кількість селекторів.

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

32
00:02:11,345 --> 00:02:14,345
що зараз вони мають однакові властивості.

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

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

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

36
00:02:26,582 --> 00:02:28,262
мали однаковий стиль.

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

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