Next Siblings ('previous ~ siblings') JQ Home  <<  Selectors  <<  Next Siblings ('previous ~ siblings')

Next Siblings selector.

Shorthand version $('previous ~ siblings')

Description

The ('previous ~ siblings') selector, selects all specified sibling elements that follow after the specified previous element and have the same parent.

Syntax

Signature Description
jQuery('previous ~ siblings')Next Siblings match

Parameters

Parameter Description
previousA valid selector.
siblingsAnother valid selector to match the elements next to the previous selector.

Return

N/A.

Next Siblings ('previous ~ siblings') Example Selectors  <<  Top

Selects all specified sibling elements that follow after the specified previous element and have the same parent.

The following example will select all 'h4' elements that are preceded by a 'h3' element and place a 2 pixel solid red border around them. In this case the elements both share a common 'div' ancestor. Look at the right sidebar after clicking the button.




$(function(){
  $('#btn24').on('click', function() {
    $('h3 ~ h4').css('border', '2px solid red');
  });
}); 


Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors