Ми знову на сторінці про пончики і про небезпеку їхнього споживання.
Мені справді подобається клас попереджень, який ми додали до тегів та .
Але я хочу, щоб ці попередження виділялись ще більше.
Зараз вони мають сірі межі з правила класу "fact".
Але я думаю, що вони матимуть кращий вигляд з товстими межами помаранчевого кольору.
Спробуймо додати це до правила "warning".
border: 5 px solid orange.
Ах, мені дуже подобається! Але ці межі також є на тезі ,
і вони виглядають не дуже добре посеред всього цього тексту.
Я хочу, щоб вони були лише на абзацах "warning",
а не на словах, які розташовані посеред тексту, як тут.
Як мені зробити більш точне правило CSS?
Що ж, одним із способів є створити цілий новий клас "warning-paragraph"
і перенести властивість туди. Але ми можемо зробити по-іншому.
Ми можемо сказати браузеру застосувати властивості меж лише до тегів,
які є абзацами і мають клас "warning".
Щоб створити таке правило, спочатку ми пишемо елемент, який ми шукаємо: 'p',
потім ми ставимо крапку та пишемо ім'я класу: warning.
Це каже браузеру знайти всі теги , які належать до класу "warning"
і застосувати до них всі задані властивості.
Вставмо цю властивість меж сюди...
І вуаля! Тепер межі є в класу "fact" і відсутні в тезі .
Ми можемо так робити з будь-якими комбінаціями елементів і їхніми класами,
щоразу як хочемо, щоб браузер застосував стилі лише до окремих тегів, які мають клас.
Лише переконайтеся, що ви дотримуєтесь такої послідовності:
ім'я тега, крапка, і далі ім'я класу.
Якщо ви випадково поставите пробіл між іменем тега і крапкою, це не спрацює.
Тому що пробіл означає дещо інше в CSS.
І браузер зрозуміє це правило по-іншому.
Залишайтесь з нами, щоб дізнатись більше про такий-вже-особливий пробіл.
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"