Комбинатор следующего соседа

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

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

Синтаксис

/* The white space around the + combinator is optional but recommended. */
former_element + target_element { style properties }

Примеры

Основные принципы использования

В этом примере показано, как выбрать следующего соседа, если этот сосед имеет определённый тип.

CSS

Мы задаём стили только для <li>, который следует непосредственно за <li> — первым элементом своего типа:

li:first-of-type + li {
  color: red;
  font-weight: bold;
}

HTML

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Результат

Выбор предыдущего соседа

Комбинатор следующего соседа можно использовать внутри функционального селектора :has(), чтобы выбрать предыдущего соседа.

CSS

Мы задаём стили только для <li>, у которого есть следующий сосед — <li>, последнего элемента своего типа:

li:has(+ li:last-of-type) {
  color: red;
  font-weight: bold;
}

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three!</li>
  <li>Four</li>
</ul>

Результат

Спецификации

Совместимость с браузерами

См. также

• Комбинатор последующих соседей