WEBVTT

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

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

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

00:00:12.673 --> 00:00:16.889
Зараз вони мають сірі межі з правила
класу "fact".

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

00:00:20.922 --> 00:00:25.802
Спробуймо додати це до правила "warning".

00:00:25.802 --> 00:00:29.581
border: 5 px solid orange.

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

00:00:34.219 --> 00:00:37.319
і вони виглядають не дуже добре
посеред всього цього тексту.

00:00:37.319 --> 00:00:39.982
Я хочу, щоб вони були лише на абзацах
"warning",

00:00:39.982 --> 00:00:43.744
а не на словах, які розташовані посеред
тексту, як тут.

00:00:43.744 --> 00:00:46.511
Як мені зробити більш точне правило CSS?

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

00:00:50.532 --> 00:00:55.152
і перенести властивість туди.
Але ми можемо зробити по-іншому.

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

00:01:01.240 --> 00:01:04.576
які є абзацами і мають клас "warning".

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

00:01:09.121 --> 00:01:14.170
потім ми ставимо крапку та пишемо
ім'я класу: warning.

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

00:01:18.673 --> 00:01:21.385
і застосувати до них
всі задані властивості.

00:01:21.385 --> 00:01:26.453
Вставмо цю властивість меж сюди...

00:01:26.453 --> 00:01:34.321
І вуаля! Тепер межі є в класу "fact" і
відсутні в тезі .

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

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

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

00:01:45.233 --> 00:01:50.707
ім'я тега, крапка, і далі ім'я класу.

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

00:01:56.453 --> 00:01:59.940
Тому що пробіл означає дещо інше в CSS.

00:01:59.940 --> 00:02:02.765
І браузер зрозуміє це правило по-іншому.

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

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