Next Siblings Selector ("prev ~ siblings")

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

.next siblings(prev, siblings)

prev SelectorAny valid selector.
siblings SelectorA 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.

JS
<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>
CSS
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;
}
HTML
$("#prev ~ div").css("border", "3px groove blue");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)