jQuery Next Siblings Selector (“prev ~ siblings”)

What You’ll Learn

The next siblings selector uses the ~ combinator to match every following sibling that shares the same parent — not just the immediate next one. Available since jQuery 1.0; ideal for section paragraphs after headings, validation hints after error markers, and styling groups of sibling elements.

Introduction

Siblings share the same parent. When you need to style or manipulate every element that comes after a reference sibling — not just the one directly next to it — the general sibling combinator ~ is the right tool.

Official jQuery documentation describes prev ~ siblings as selecting all sibling elements that follow after prev, have the same parent, and match the filtering siblings selector. This is broader than the adjacent sibling combinator +, which stops at the immediate next sibling. This tutorial walks through the official #prev ~ div demo, compares reach with +, and shows practical patterns for typography, forms, and validation UI.

Understanding the Next Siblings Selector

Think of prev ~ siblings as a sibling chain relationship: “Is this element a following sibling that comes after that element?”

• h2 ~ p → all paragraphs after each h2 — not just the lead paragraph.
• #prev ~ div → every div sibling after #prev; span siblings are skipped.
• .error ~ .help-text → every help hint that follows an error marker sibling.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "prev ~ siblings" )

// common patterns:
$( "#prev ~ div" )
$( "h2 ~ p" )
$( "label ~ input" )
$( ".error ~ .help-text" )

Parameters

• prev — any valid selector for the preceding sibling element(s).
• siblings — a selector to filter following siblings of each matched prev.

Return value

• A jQuery object containing every following sibling that matches siblings after each matched prev.
• Can match zero, one, or many elements per prev — unlike +, which matches at most one.

Official jQuery API example

// Borders all div siblings after #prev
$( "#prev ~ div" ).css( "border", "3px groove blue" );

Official markup pattern: div before #prev (no match), span#prev, then div and span siblings — only following div siblings receive the border. Nested divs inside a sibling (“niece”) are descendants, not siblings.

Examples Gallery

Example 1 follows the official jQuery #prev ~ div demo. Examples 2–5 style all section paragraphs, compare + vs ~ reach, show why gaps do not break ~, and highlight validation hints after error markers. Use the Try-it links to run each snippet.

$( "#prev ~ div" ).css( "border", "3px groove blue" );

// Matches div siblings after #prev
// Skips: div before #prev, span siblings, nested "niece" divs

Following div siblings after #prev → blue groove border
div before #prev → unchanged
span siblings → unchanged (not div)
nested niece div inside sibling → unchanged (not a sibling)

$( "h2 ~ p" ).css( "background", "#e0f2fe" ).css( "padding", "8px" );

// All paragraphs after each h2 — not just the lead paragraph

Every p after each h2 → light blue background
Paragraphs before the first h2 → unchanged

console.log( "Adjacent (+):", $( "h2 + p" ).length );
console.log( "General (~):", $( "h2 ~ p" ).length );

// h2 + p = one lead paragraph per h2
// h2 ~ p = every paragraph sibling after each h2

Adjacent (+): 1 (immediate next p only)
General (~): 3 (all following p siblings)

$( "label ~ input" ).addClass( "general-match" );
$( "label + input" ).addClass( "adjacent-match" );

// label → span → input: ~ matches, + does not
// label → input: both + and ~ match

label ~ input → 2 matches (including input after span gap)
label + input → 1 match (direct label+input pair only)

$( ".error ~ .help-text" ).addClass( "visible" );

// Every .help-text sibling after .error in the same field group

Help hints after .error → class "visible" (highlighted)
Help text in fields without .error → unchanged

🚀 Common Use Cases

• Section typography — style all paragraphs after each heading with h2 ~ p.
• Form fields — target every input that follows a label sibling, even with hint text between.
• Validation UI — show all help hints after an .error marker.
• Tab panels — reveal every panel sibling after an active tab control.
• List styling — highlight all items after a separator or category heading sibling.
• Accordion content — animate every content block that follows an expanded header sibling.

📝 Notes

• Available since jQuery 1.0 — standard CSS general sibling combinator syntax.
• Both prev and matched siblings must share the same parent element.
• Matches all following siblings — not just the immediate next one (use + for that).
• Elements between prev and a target sibling do not break a ~ match.
• Nested descendants inside siblings are not siblings themselves — they are never matched by ~.
• Equivalent traversal: $("prev").nextAll("siblings").

💡 Best Practices