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

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

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

0:00:12.673,0:00:16.889
Зараз вони мають сірі межі з правила[br]класу "fact".

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

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

0:00:25.802,0:00:29.581
border: 5 px solid orange.

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

0:00:34.219,0:00:37.319
і вони виглядають не дуже добре[br]посеред всього цього тексту.

0:00:37.319,0:00:39.982
Я хочу, щоб вони були лише на абзацах[br]"warning",

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

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

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

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

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

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

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

0:01:09.121,0:01:14.170
потім ми ставимо крапку та пишемо[br]ім'я класу: warning.

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

0:01:18.673,0:01:21.385
і застосувати до них[br]всі задані властивості.

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

0:01:26.453,0:01:34.321
І вуаля! Тепер межі є в класу "fact" і[br]відсутні в тезі .

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

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

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

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

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

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

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

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

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