Справочник HTML & CSS

A + B

Комбинаторы соседей: `+` выбирает элемент сразу после A, `~` — всех следующих соседей A.

Синтаксис

A + B { … }  A ~ B { … }

Параметры

Параметр	Тип	Описание
A + B	next sibling	B, который идёт сразу после A у того же родителя.
A ~ B	later siblings	Все B, которые идут после A у того же родителя.

Примеры

Абзац сразу после заголовка:

<style>
  h3 + p { font-weight: bold; }
</style>
 
<h3>Title</h3>
<p>The first paragraph after the title is bold.</p>
<p>The second one is not.</p>

Все абзацы после заголовка:

<style>
  h3 ~ p { color: teal; }
</style>
 
<p>Before the title — not selected.</p>
<h3>Title</h3>
<p>After the title.</p>
<p>Also after the title.</p>

Примечания

Оба комбинатора смотрят только вперёд: комбинатора «предыдущий сосед» нет. Чтобы оформить элемент по тому, что идёт после него, используйте :has(), например h3:has(+ p).

См. также

A > B — Комбинатор дочернего элемента: выбирает элементы B, которые являются прямыми детьми A.
:has() — Выбирает элемент, внутри которого есть что-то подходящее под селектор в скобках, — «селектор родителя».

В учебнике

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

Спасибо, что читаете!