# Соседний селектор в CSS

Соседний селектор `+` позволяет выбрать элемент по его соседу сверху.

## Синтаксис

`селектор1 + селектор2 { }`

## Пример

Давайте обратимся ко всем тегам `p`, непосредственно находящимся после тегов `h2`, и покрасим их в красный цвет:

`<h2>text</h2> <p> + </p> <p> - </p> <p> - </p>` `h2 + p { color: red; }`

:

## Пример

Давайте обратимся ко всем тегам `p`, непосредственно находящимся после элементов с классом `.test`, и покрасим их в красный цвет:

`<p class="test"> text </p> <p> + </p> <p> - </p>` `.test + p { color: red; }`

:

## Пример

Давайте обратимся ко всем элементам с классом `.elem`, непосредственно находящимся после элементов с классом `.test`, и покрасим их в красный цвет:

`<p class="test"> text </p> <p class="elem"> + </p> <p> - </p>` `.test + .elem { color: red; }`

:

## Смотрите также

- Дочерний селектор,
  который позволяет выбрать элементы по непосредственной вложенности
- Контекстный селектор,
  который позволяет выбрать элемент по его родителю
- Родственный селектор,
  который позволяет выбрать элементы после заданного
- Универсальный селектор,
  который позволяет выбрать все элементы

↑