Селекторы в CSS. Соседский селектор | Записки верстальщика

`+` плюс, или «соседский селектор»

Выбирает соседний селектор. Для примера можно написать верстку как в примере предыдущей статьи про "Братские селекторы".

<div class="block-2">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

Опять выберу третий span и изменю в нем цвет текста

.block-2 span:nth-child(3) {
  color: blue;
}

пять цифр подряд, у цифры три цвет синий — У третьего `span` изменен цвет текста.

Выбираю соседний селектор и меняю у него цвет текста.

.block-2 span:nth-child(3) + span {
  color: brown;
}

пять цифр подряд, у цифры три цвет синий, у цифры четыре цвет коричневый — Изменён цвет текста у четвертого `span`.

Как видно, изменился только один span, а именно четвертый, который находится по соседству с выбранным третьим.

Новички могут подумать что третий span остался синим из-за специфичности. Но это не так:

.block-2 span:nth-child(3) + span {
  color: brown;
  background-color: burlywood;
}

пять цифр подряд, у цифры три цвет синий, у цифры четыре цвет коричневый и фон берливуд — Фоновый цвет поменялся только у соседнего селектора.

А теперь вопрос студентам и новичкам: а может ли этот селектор выбрать другой span? Проверить это просто! Добавлю всем span какой-нибудь фон, а затем, вложу в четвертый еще один span "4.1"

<style>
  .block-2 span {
    background-color: aqua;
  }
  .block-2 span:nth-child(3) {
    color: blue;
  }
  .block-2 span:nth-child(3)+span {
    color: brown;
    background-color: burlywood;
  }
</style>
<div class="block-2">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4
    <span>4.1</span>
  </span>
  <span>5</span>
</div>

цифры 1, 2, 3, 4, 4.1, 5. все цифры цвета аква, цифра 4 цвета берливуд — Фоновый цвет поменялся только у соседнего селектора, но у вложенного в соседний `span` фоновый цвет как у других элементов `span`

В результате вложенный span остался с фоном как у всех кроме соседнего, а цвет текста в нем наследовался от родительского, соседнего span.

Остался последний вопрос: а что будет, если между третьим и четвертым span добавить любой другой, видимый элемент? Новички могут подумать что наш элемент так же отработает, но, он уже будет не по соседству, а значит селектор не отработает.

Объявление

Нравится фронтенд — попробуйте самые подробные интерактивные тренажёры от HTML Academy бесплатно. Подойдут и действующим разработчикам, чтобы подтянуть навыки вёрстки.

Обнаружил ошибку в статье? Напиши на почту.

↑ Дочерний селектор

↓ Братский селектор

видео

+ плюс, или «соседский селектор»

`+` плюс, или «соседский селектор»