Next Adjacent ('previous + next')S2C Home « Selectors « Next Adjacent ('previous + next')
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
| Signature | Description |
|---|---|
jQuery('previous + next') | Next Adjacent match |
Parameters
| Parameter | Description |
|---|---|
previous | A valid selector. |
next | Another valid selector to match the element next to the previous selector. |
Return
N/A.
Next Adjacent ('previous + next') ExamplesTop
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');
});
});