Next Adjacent ('previous + next') JQ Home  <<  Selectors  <<  Next Adjacent ('previous + next')

• <<    Descendant Selector
• Next Siblings Selector     >>

Next Adjacent selector.

Shorthand version $('previous + next')

Description

The ('previous + next') selector, selects all specifed next sibling elements that are directly preceded by the specified previous sibling element.

• Both elements on either side of the combinator must share the same parent.

Syntax

Parameters

Return

N/A.

Next Adjacent ('previous + next') Examples Selectors  <<  Top

Selects all specifed next sibling elements that are directly preceded by the specified previous sibling element.

The following example will select all 'p' elements that are preceded by 'h3' elements and place a 1 pixel solid red border around them. In this case the elements both share a common 'div' ancestor.

$(function(){
  $('#btn1').on('click', function() {
    $('h3 + p').css('border', '1px solid red');
  });
}); 

The following example will select all 'b' elements that are preceded by 'code' elements and change the background color of these elements to yellow. In this case the elements both share a common 'pre' ancestor.

$(function(){
  $('#btn2').on('click', function() {
    $('code b').css('backgroundColor', 'yellow');
  });
}); 

The following example will select all 'article' elements that are preceded by 'main' elements and change the background color of these elements to silver. In this case the elements both share a common 'div' ancestor.

$(function(){
  $('#btn3').on('click', function() {
    $('main article').css('backgroundColor', 'silver');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    Descendant Selector
• Next Siblings Selector     >>