Группировка и комбинаторы

Учимся выбирать элементы по их положению в дереве страницы и применять один стиль сразу к нескольким селекторам.

Комбинаторы — это символы между селекторами, которые задают связь по вложенности или соседству элементов.

Группировка через запятую

Если одно и то же правило нужно нескольким селекторам, перечислите их через запятую — не дублируя блок.

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #222;
}

Все заголовки первых трёх уровней получат один шрифт и цвет. Запятая читается как «или»: выбери h1, или h2, или h3.

Комбинатор потомка (пробел)

Пробел между селекторами означает «вложенный внутрь, на любой глубине». Правило применится к элементам, которые лежат где-то внутри другого.

<article>
  <p>Абзац внутри статьи</p>
  <div><p>Глубоко вложенный абзац</p></div>
</article>
<p>Абзац снаружи</p>

article p {
  color: teal;
}

Бирюзовыми станут оба абзаца внутри article (неважно, насколько глубоко), а абзац снаружи — нет.

Дочерний комбинатор (>)

Знак > строже: он выбирает только прямых детей, то есть элементы на один уровень внутри, без «внуков».

article > p {
  font-weight: bold;
}

В примере выше жирным станет только первый абзац — прямой ребёнок article. Вложенный в div абзац — это уже «внук», и он не попадёт под правило.

Соседний комбинатор (+)

Плюс выбирает элемент, который идёт сразу после другого и на том же уровне (непосредственный сосед).

<h2>Заголовок</h2>
<p>Первый абзац после заголовка</p>
<p>Второй абзац</p>

h2 + p {
  font-size: 18px;
}

Увеличится только первый абзац — тот, что стоит сразу за h2. Второй абзац не сосед заголовка, его правило не тронет. Это удобно, например, чтобы выделить вводный абзац под заголовком.

Все следующие соседи (~)

Тильда выбирает все элементы того же уровня, идущие после данного (не только первый).

h2 ~ p {
  color: gray;
}

Здесь оба абзаца после h2 станут серыми.

Памятка по комбинаторам

Итог

• Запятая объединяет селекторы под одно правило.
• Пробел — потомок на любой глубине, > — только прямой ребёнок.
• + — ближайший сосед после элемента, ~ — все соседи после него.