Next Siblings Selector (“prev ~ siblings”)

next siblings selector

Description: Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.

  • version added: 1.0jQuery( "prev ~ siblings" )

    prev: Any valid selector.

    siblings: A selector to filter elements that are the following siblings of the first selector.

The notable difference between (prev + next) and (prev ~ siblings) is their respective reach. While the former reaches only to the immediately following sibling element, the latter extends that reach to all following sibling elements.


Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>next siblings demo</title>
  div, span {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
$( "#prev ~ div" ).css( "border", "3px groove blue" );


© The jQuery Foundation and other contributors
Licensed under the MIT License.