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

Комбинатор следующего элемента (+) отделяет два селектора и сопоставляет второй элемент только в том случае, если он непосредственно следует за первым элементом, и оба являются потомками одного и того же родительского 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>

Результат

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

Спецификация
Селекторы Уровень 4 # adjacent-sibling-combinators

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Next-sibling_combinator`	1	12	1	3.5	1	18	4	10.1	1	1.0	≤37

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator