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

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

## Пример

Давайте обратимся ко всем тегам `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; }`

:

## Практические задачи

Дан код:

`<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li id="elem">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>`

Напишите селектор, который выберет элемент, находящийся сразу после элемента `#elem`.

Дан код:

`<ul> <li>1</li> <li class="elem">2</li> <li>3</li> <li>4</li> <li class="elem">5</li> <li>6</li> <li>7</li> <li class="elem">8</li> <li>9</li> </ul>`

Напишите селектор, который выберет элементы, находящиеся сразу после элементов `.elem`.

←→
↑