What Is the Multiple Selector?

The multiple selector combines several CSS selectors with commas. jQuery returns the union of all matches — every element that matches any of the listed selectors — in one collection. Available since jQuery 1.0 (standard CSS).

$("selector1, selector2, selectorN")

$("div, span")           → all divs OR all spans
$("div, span, p.myClass") → divs, spans, and p.myClass

$("div span")   → descendant (space), not OR
$("div.active") → AND (chained), not OR

How to Use the Multiple Selector

List selectors separated by commas, then chain any jQuery method on the combined set.

1. Decide which unrelated groups you need (tags, classes, IDs, attributes).
2. Join them with commas: $("h1, h2, .subtitle").
3. Apply one action to the whole set — style, events, show/hide, and so on.
4. Remember: results are in document order, not selector-list order.

Pseudocode

parts = split(selectorString, by comma)
matches = empty set

for each part in parts:
    matches = matches ∪ find(part)

remove duplicates from matches
sort matches by document order
return jQuery(matches)

Cheat Sheet

Keep these facts handy while writing comma selectors.

Live Preview

Pick a selector against a small sample DOM and see which tags match (and in what order).

$("div, span, p.myClass")
matched: 5
order: DIV, P, SPAN, DIV, SPAN

/* comma = OR (union) */

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

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

console.log(tags);
// DIV, P, SPAN  (plus any other matching nodes)

DIV, P, SPAN
(p.notMyClass is skipped)

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

console.log(order);
// SPAN, P, DIV, SPAN, DIV

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

var $comma = $("div, span");
var $added = $("div").add("span");

console.log($comma.length === $added.length); // true
console.log($comma.length);

true
2
(same union size for comma and .add())

console.log("comma:", $("div, span").length);
console.log("space:", $("div span").length);

// comma → every div and every span
// space → only spans nested inside a div

comma: 3
space: 1

Comma widens the match; space keeps nested spans only

$("h1, h2, .subtitle").each(function () {
  this.textContent = "[*] " + this.textContent;
});

console.log($("h1, h2, .subtitle").length);

3
h1, h2, and .subtitle text get a [*] prefix
regular paragraphs stay unchanged

Performance Notes

Official docs call the multiple expression combinator an efficient way to select disparate elements. Keep lists focused; scope under a container when the page is large.

Key Takeaways