How to Select an Element with Multiple Classes in jQuery

By the end of this page, you will understand how jQuery class selectors work, why $(".a, .b") selects an OR match, and how to select elements that match multiple classes at the same time using a combined selector like $(".a.b"). You will also see practical examples, common mistakes, and patterns used in real projects.

In jQuery, selectors follow CSS selector rules. That means class selectors behave the same way they do in CSS.

If you write:

$(".a, .b")

you are using a grouped selector. The comma means:

• select elements with class a
• and also select elements with class b

This is an OR condition.

If you want elements that have both classes on the same element, you combine the class selectors without spaces and without commas:

$(".a.b")

This means:

• select elements that have class a
• and also have class b
• on the same element

This matters because real applications often tag elements with multiple classes to describe state, role, or behavior. For example:

• .button.primary
• .user.active
• .card.featured
• .input.error

Think of classes like labels on a storage box.

• A box with label a
• A box with label b
• A box with both labels a and b

Using $(".a, .b") is like saying: bring me every box with label a or label b.

Using $(".a.b") is like saying: bring me only boxes that have both labels attached.

The comma creates a broad match. Writing the classes together creates a strict match.

Core syntax

To select elements that have multiple classes, place the class selectors directly next to each other:

$(".class1.class2")

Example

<div class="a">Only a</div>
<div class="b">Only b</div>
<div class="a b">Both a and b</div>
<div class="a b c">a, b, and c</div>

const matches = $(".a.b");
console.log(matches.length); // 2

This selects:

• <div class="a b">
• <div class="a b c">

Consider this HTML:

<div class="a">One</div>
<div class="b">Two</div>
<div class="a b">Three</div>

And this jQuery code:

const result = $(".a.b");
console.log(result.text());

Here is what happens step by step:

1. jQuery reads the selector .a.b.
2. It looks for elements with class a.
3. For each candidate, it also checks whether the same element has class b.
4. The first <div class="a"> is rejected because it does not have b.
5. The second <div class="b"> is rejected because it does not have a.

Selecting elements with multiple classes is common in real applications.

UI states

$(".button.primary").prop("disabled", true);

Use this to target only primary buttons, not every button.

Form validation

$(".field.error").addClass("shake");

Apply visual feedback only to fields currently marked as invalid.

Filtering content

$(".product.featured").show();

Show only products that belong to a category and have a special state.

Admin dashboards

$(".user.online").addClass("highlight");

Target only users who belong to a certain group and are currently active.

Interactive components

$(".tab.active").text();

Read data from the currently active tab instead of all tabs.

In real codebases, developers often combine classes to represent both type and state.

Common pattern: base class + state class

<button class="btn loading">Save</button>
<button class="btn">Cancel</button>

$(".btn.loading").prop("disabled", true);

This is useful because:

• .btn identifies the kind of element
• .loading identifies the current state

Common pattern: validation

$(".input.required")
$(".input.error")
$(".message.warning")

These combined selectors make code more specific and easier to reason about.

Common pattern: guard before applying behavior

 $activeModal = $();
 ($activeModal.) {
  $activeModal.();
}

1. Using a comma instead of combining classes

Broken:

$(".a, .b")

This means a OR b.

Correct:

$(".a.b")

This means a AND b on the same element.

2. Adding a space between classes

Broken:

$(".a .b")

This does not mean the same element has both classes. It means:

• find an element with class b
• inside an ancestor with class a

Correct:

$(".a.b")

3. Forgetting that class order does not matter in HTML

These are equivalent:

<div class="a b"></div>
<div =>

// Element has class a
$(".a")

// Element has class b
$(".b")

// Element has class a OR b
$(".a, .b")

// Element has BOTH class a AND class b
$(".a.b")

// Element with class b inside an element with class a
$(".a .b")

Rules to remember

• Use a comma for OR.
• Put class selectors together for AND on the same element.
• Use a space for a nested/descendant match.
• Class order in HTML does not matter.
• .a.b matches elements with a and b, even if they also have other classes.

Example

<div class="a b c"></div>

This matches:

$(".a.b")
$(".b.c")
$(".a.c")

Quick answer

How do I select elements with two classes in jQuery?

Use a combined class selector:

$(".a.b")

This selects elements that have both classes on the same element.

Why does $(".a, .b") select too many elements?

Because the comma means OR, not AND. It selects elements with class a, class b, or both.

What is the difference between .a.b and .a .b in jQuery?

.a.b means one element has both classes. .a .b means an element with class b is inside an element with class a.

Does the order of classes matter?

No. <div class="a b"> and <div class="b a"> are treated the same.

Can I select elements with three classes?

Yes.

$(".a.b.c")

• CSS selectors — jQuery selectors are based on CSS selector syntax.
• Class selectors — Understanding single-class selection makes multi-class selection easier.
• Descendant selectors — Useful for understanding the difference between .a.b and .a .b.
• Grouped selectors — Important because .a, .b is often confused with an intersection.
• DOM traversal — After selecting elements, developers often move to parents, children, or siblings.
• Event delegation — Combined class selectors are often used in delegated event handlers.
• Adding and removing classes — Multi-class selection is commonly paired with .addClass(), .removeClass(), and .hasClass().