jQuery Multiple Selector “selector1, selector2, selectorN”

What You’ll Learn

The multiple selector — written selector1, selector2, selectorN — combines several CSS selectors with the comma combinator. Each selector runs independently and jQuery returns the union of all matches. It is the efficient way to target disparate elements in one query — available since jQuery 1.0.

Introduction

Real pages mix many element types — headings, paragraphs, buttons, and special classes. Running separate queries for each group works, but the comma combinator lets you select them all at once with a single $() call.

The syntax selector1, selector2, selectorN is standard CSS. jQuery has supported it since version 1.0. Each comma-separated part is evaluated on its own; the returned jQuery object contains every element that matched any of the selectors — a union, not an intersection.

Understanding the Multiple Selector

Think of each selector as a separate search. The comma merges every result into one collection — like asking “find all divs or all spans or all paragraphs with class myClass.”

• $("div, span") → every div and every span on the page.
• $("h1, h2, .subtitle") → all h1s, all h2s, and every element with class subtitle.
• $("div span") → not a multiple selector — space means descendant, not OR.
• $("div.active") → chained AND — divs that also have class active.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "selector1, selector2, selectorN" )
// shorthand:
$( "selector1, selector2, selectorN" )

// common patterns:
$( "div, span, p.myClass" )
$( "h1, h2, .subtitle" )

Parameters

• selector1, selector2, … — any valid CSS selectors separated by commas. Each is evaluated independently.
• Whitespace around commas is optional: div,span and div, span behave the same.

Return value

• A jQuery object containing the combined results of all specified selectors (union).
• Elements appear in document order, not in the order selectors were listed.
• Duplicates are removed — each DOM node appears at most once.

Official jQuery API examples

// Example 1 — style disparate elements at once
$( "div, span, p.myClass" ).css( "border", "3px solid red" );

// Example 2 — result order follows the DOM, not the selector list
$( "div, p, span" ).map( function() {
  return this.tagName;
} ).get().join( ", " );

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover document order, .add() migration, comma vs descendant space, and styling headings together. Use the Try-it links to run each snippet.

$( "div, span, p.myClass" ).css( "border", "3px solid red" );

// Matches: every <div>, every <span>, every <p class="myClass">
// Skips: p without myClass, other tags without matching selectors

All divs → red border
All spans → red border
p.myClass → red border
Other elements → unchanged

var order = $( "div, p, span" ).map( function() {
  return this.tagName;
} ).get().join( ", " );

console.log( order );
// If a <span> appears before a <div> in the HTML,
// SPAN comes first — even though "div" is listed first

SPAN, DIV, P, SPAN, DIV
(document order — not "div, p, span" list order)

// Comma — one static query
var $union = $( "div, span, p.myClass" );

// .add() — same result from an existing collection
var $same = $( "div" ).add( "span" ).add( "p.myClass" );

console.log( $union.length === $same.length ); // true

true
Both approaches return the same union of elements

var commaCount = $( "div, span" ).length;
var spaceCount = $( "div span" ).length;

console.log( "comma (OR):", commaCount );
console.log( "space (descendant):", spaceCount );

// comma → all divs + all spans
// space → only spans nested inside a div

comma (OR): 8
space (descendant): 3

Comma widens the match; space narrows to nested spans

$( "h1, h2, .subtitle" ).css({
  "font-weight": "600",
  "margin-bottom": "0.5em"
});

// Matches: every h1, every h2, every element with class subtitle
// Efficient way to style disparate heading-like elements at once

h1, h2, and .subtitle elements → font-weight 600, margin-bottom 0.5em
Other text elements → unchanged

🚀 Common Use Cases

• Shared styling — $("h1, h2, h3") or $("h1, h2, .subtitle") for typography.
• Form controls — $("input, select, textarea") to validate or disable all inputs at once.
• Hide/show groups — $(".tab-panel, .tab-content") to toggle related sections together.
• Event binding — $("a, button, .clickable") for unified click handlers.
• Reset states — $(".error, .warning, .success") to clear message classes.
• Accessibility — $("[role='button'], button, a") to focus or announce interactive elements.

📝 Notes

• Available since jQuery 1.0 — standard CSS comma combinator.
• Comma means OR (union), not AND.
• Result order follows the document tree, not the order selectors were listed.
• Alternative: .add() method produces the same union from an existing collection.
• Not the same as descendant space (div span) or chained AND (div.active).
• Not the same as multiple-attribute selectors ([a][b]) which require both attributes.

💡 Best Practices