1
00:00:00,342 --> 00:00:03,899
Ми знову на сторінці про пончики і про
небезпеку їхнього споживання.

2
00:00:03,899 --> 00:00:08,150
Мені справді подобається клас попереджень,
який ми додали до тегів  та .

3
00:00:08,150 --> 00:00:12,673
Але я хочу, щоб ці попередження виділялись
ще більше.

4
00:00:12,673 --> 00:00:16,889
Зараз вони мають сірі межі з правила
класу "fact".

5
00:00:16,889 --> 00:00:20,922
Але я думаю, що вони матимуть кращий
вигляд з товстими межами помаранчевого кольору.

6
00:00:20,922 --> 00:00:25,802
Спробуймо додати це до правила "warning".

7
00:00:25,802 --> 00:00:29,581
border: 5 px solid orange.

8
00:00:29,675 --> 00:00:34,198
Ах, мені дуже подобається! Але ці межі
також є на тезі ,

9
00:00:34,219 --> 00:00:37,319
і вони виглядають не дуже добре
посеред всього цього тексту.

10
00:00:37,319 --> 00:00:39,982
Я хочу, щоб вони були лише на абзацах
"warning",

11
00:00:39,982 --> 00:00:43,744
а не на словах, які розташовані посеред
тексту, як тут.

12
00:00:43,744 --> 00:00:46,511
Як мені зробити більш точне правило CSS?

13
00:00:46,511 --> 00:00:50,532
Що ж, одним із способів є створити
цілий новий клас "warning-paragraph"

14
00:00:50,532 --> 00:00:55,152
і перенести властивість туди.
Але ми можемо зробити по-іншому.

15
00:00:55,152 --> 00:01:01,240
Ми можемо сказати браузеру застосувати
властивості меж лише до тегів,

16
00:01:01,240 --> 00:01:04,576
які є абзацами і мають клас "warning".

17
00:01:04,576 --> 00:01:09,121
Щоб створити таке правило, спочатку ми
пишемо елемент, який ми шукаємо: 'p',

18
00:01:09,121 --> 00:01:14,170
потім ми ставимо крапку та пишемо
ім'я класу: warning.

19
00:01:14,170 --> 00:01:18,673
Це каже браузеру знайти всі теги ,
які належать до класу "warning"

20
00:01:18,673 --> 00:01:21,385
і застосувати до них
всі задані властивості.

21
00:01:21,385 --> 00:01:26,453
Вставмо цю властивість меж сюди...

22
00:01:26,453 --> 00:01:34,321
І вуаля! Тепер межі є в класу "fact" і
відсутні в тезі .

23
00:01:34,321 --> 00:01:37,595
Ми можемо так робити з будь-якими
комбінаціями елементів і їхніми класами,

24
00:01:37,595 --> 00:01:42,603
щоразу як хочемо, щоб браузер застосував
стилі лише до окремих тегів, які мають клас.

25
00:01:42,603 --> 00:01:45,233
Лише переконайтеся, що ви дотримуєтесь
такої послідовності:

26
00:01:45,233 --> 00:01:50,707
ім'я тега, крапка, і далі ім'я класу.

27
00:01:50,707 --> 00:01:56,453
Якщо ви випадково поставите пробіл між
іменем тега і крапкою, це не спрацює.

28
00:01:56,453 --> 00:01:59,940
Тому що пробіл означає дещо інше в CSS.

29
00:01:59,940 --> 00:02:02,765
І браузер зрозуміє це правило по-іншому.

30
00:02:02,765 --> 00:02:06,505
Залишайтесь з нами, щоб дізнатись більше
про такий-вже-особливий пробіл.

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