Чим h1, h2, h3 відрізняється від h1 h2 h3 в описі стилів?

CSSJunior~1 хв читання

Різниця принципова: це групування проти вкладеності.

Кома означає, що стиль застосується до кожного селектора окремо.

css

h1, h2, h3 {
  color: red;
}

Це правило пофарбує всі 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`	майже не трапляється

Якщо потрібно задати спільний стиль кільком елементам, використовують кому, а не пробіл.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.