jQuery Next Adjacent Selector (“prev + next”)

What You’ll Learn

The next adjacent selector uses the + combinator to match elements that are the immediate next sibling of a preceding element — not all following siblings. Available since jQuery 1.0; ideal for label+input pairs, heading+paragraph styling, and definition lists.

Introduction

Siblings share the same parent. When you need to style or manipulate an element based on what comes directly before it — not nested inside it, and not several siblings later — the adjacent sibling combinator + is the right tool.

Official jQuery documentation describes prev + next as selecting elements matching next that are immediately preceded by sibling prev. Both sides must share the same parent. This is stricter than the general sibling combinator ~, which matches all following siblings. This tutorial walks through the official label + input demo and practical patterns for forms, typography, and definition lists.

Understanding the Next Adjacent Selector

Think of prev + next as a one-step sibling relationship: “Is this element the very next sibling after that element?”

• label + input → inputs whose immediate previous sibling is a label.
• h2 + p → the paragraph directly after each h2 — not later paragraphs.
• dt + dd → definition descriptions that immediately follow their term.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "prev + next" )

// common patterns:
$( "label + input" )
$( "h2 + p" )
$( "dt + dd" )
$( ".tab + .panel" )

Parameters

• prev — any valid selector for the preceding sibling element(s).
• next — a selector for the element that must immediately follow each matched prev.

Return value

• A jQuery object containing every element that is the immediate next sibling of a matched prev.
• At most one next element per matching prev — not all following siblings.

Official jQuery API example

// Labels its following input with the text "Labeled!"
$( "label + input" ).css( "color", "blue" ).val( "Labeled!" );

Official markup pattern: Name: label+input, Newsletter: label+input — each input directly follows its label sibling.

Examples Gallery

Example 1 follows the official jQuery label + input demo. Examples 2–5 style heading paragraphs, compare sibling vs nested selectors, show why a gap breaks the match, and target definition list pairs. Use the Try-it links to run each snippet.

$( "label + input" ).css( "color", "blue" ).val( "Labeled!" );

// Matches inputs immediately after label siblings
// Name: [label][input]  Newsletter: [label][input]

Name input → blue text, value "Labeled!"
Newsletter input → blue text, value "Labeled!"
Other inputs not directly after a label → unchanged

$( "h2 + p" ).css( "font-size", "1.1em" ).css( "color", "#444" );

// Only the first paragraph after each h2 — not later paragraphs

First p after each h2 → larger, darker text
Second and third paragraphs → default styling

console.log( "Adjacent siblings:", $( "label + input" ).length );
console.log( "Nested in div:", $( "div input" ).length );

// label + input = same-level siblings only
// div input = any input inside a div at any depth

Adjacent siblings: 2 (label directly before input)
Nested in div: 4 (includes inputs inside nested wrappers)

$( "label + input" ).addClass( "adjacent" );

// label → span → input: input is NOT adjacent to label
// label → input: input IS adjacent — gets class "adjacent"

Direct label+input pair → class "adjacent"
label → span → input → no class (span breaks adjacency)

$( "dt + dd" ).css( "margin-left", "1em" ).css( "color", "#555" );

// Each dd must directly follow its dt sibling

Term 1 → dd styled (indented, gray)
Term 2 → dd styled
Misplaced dd not after dt → unchanged

🚀 Common Use Cases

• Form labels — style or populate inputs immediately after label siblings.
• Typography — style the lead paragraph after each heading with h2 + p.
• Tab interfaces — show the panel directly after an active tab button.
• Definition lists — indent and color dd elements following dt terms.
• Error messages — highlight validation text placed immediately after invalid fields.
• Icon + text pairs — style captions or labels that directly follow icon elements.

📝 Notes

• Available since jQuery 1.0 — standard CSS adjacent sibling combinator syntax.
• Both prev and next must share the same parent element.
• Only the direct next sibling matches — not second, third, or later following siblings.
• For all following siblings, use the general sibling combinator ~ instead.
• Whitespace around + is optional: label+input and label + input both work.
• Equivalent traversal: $("prev").next("next").

💡 Best Practices