jQuery селектор смежных элементов

Определение и применение

jQuery селектор смежных элементов позволяет выбрать все первые указанные элементы внутри родительского элемента, которые следуют сразу же за смежным для него элементом.

jQuery синтаксис:

$( "selector + selector" )

/* в качестве следующего элемента может выступать любой селектор */

Добавлен в версии jQuery

Селектор в CSS

Пример использования

<div>
  <h2 class="main">Заголовок второго уровня</h2>
  <p class="info">Абзац с классом info</p>
  <p>Просто абзац</p>
</div>

$(document).ready(function () {
    $('h2 + p').css('background-color', 'yellow') // выбирает все элементы <p> внутри родительского элемента, которые следуют сразу же за элементами <h2>
    $('.main + .info').css('border-left', '5px solid green') // выбирает все элементы с классом .info внутри родительского элемента, которые следуют сразу же за элементами с классом .main
})

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора смежных элементов jQuery, мы выбрали все элементы <p> внутри родительского элемента, которые следуют сразу же за элементами <h2> и все элементы с классом .info внутри родительского элемента, которые следуют сразу же за элементами с классом .main (выбрали те же элементы, только в качестве селекторов указали не селекторы типа, а селекторы класса). В первом случае мы установили цвет заднего фона, а во втором сплошную границу зеленого цвета размером 5 пикселей с левой стороны.