Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим h1, h2, h3 відрізняється від h1 h2 h3 в описі стилів?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`h1, h2, h3`** (з комою) застосовує стиль до кожного селектора окремо, тоді як **`h1 h2 h3`** (з пробілом) вибирає лише `h3`, вкладений у `h2`, вкладений у `h1`. **Ключове:** щоб задати спільний стиль кільком елементам, використовують кому, а не пробіл, оскільки вкладеність h1→h2→h3 практично не трапляється в реальній розмітці.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняРізниця принципова: це **групування** проти **вкладеності**. --- ### `h1, h2, h3` **- групування** Кома означає, що стиль застосується **до кожного селектора окремо**. ```css h1, h2, h3 { color: red; } ``` Це правило пофарбує **всі** `h1`, **всі** `h2` і **всі** `h3`, незалежно від того, де вони перебувають у документі. --- ### `h1 h2 h3` **- вкладені селектори (нащадки)** Пробіл означає, що стиль застосується **лише до** `h3`**, який перебуває всередині** `h2`**, а** `h2` **- всередині** `h1`. ```css h1 h2 h3 { color: red; } ``` Такий сценарій практично не трапляється в реальності, тому що структура: ```html <h1> <h2> <h3>Текст</h3> </h2> </h1> ``` - по суті неможлива і порушує семантику HTML. Тому такий селектор майже ніколи не спрацює. --- ### **Підсумок** | Запис | Що означає | Де застосовується | |---|---|---| | `h1, h2, h3` | стиль для кожного з селекторів | до *всіх* `h1`, `h2`, `h3` | | `h1 h2 h3` | стиль для `h3`, вкладеного в `h2`, вкладеного в `h1` | майже не трапляється | --- Якщо потрібно задати спільний стиль кільком елементам, використовують **кому**, а не пробіл.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.