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

Being able to target elements with multiple classes helps you write more precise code and avoid affecting the wrong elements.

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">

It does not select:

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

because those elements do not have both classes.

More examples

Select active users

<li class="user active">Alice</li>
<li class="user">Bob</li>
<li class="user active admin">Carol</li>

$(".user.active").css("font-weight", "bold");

Only Alice and Carol are selected.

Add a style to invalid form inputs

<input class="input error" />
<input class="input" />

$(".input.error").addClass("highlight");

Only the input with both input and error is selected.

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.
6. The third <div class="a b"> matches because it has both classes.
7. jQuery returns a collection containing only that element.
8. result.text() returns Three.

Now compare that with:

const result = $(".a, .b");

This works differently:

1. Select elements with class a.
2. Select elements with class b.
3. Combine both sets.
4. Return every matching element from either group.

So .a, .b means OR, while .a.b means AND on the same element.

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

const $activeModal = $(".modal.open");
if ($activeModal.length) {
  $activeModal.focus();
}

This is a simple guard clause: only run logic if the exact kind of element currently exists.

Common pattern: event targeting

$(document).on("click", ".menu-item.disabled", function (event) {
  event.preventDefault();
});

This attaches behavior specifically to disabled menu items.

In larger projects, combined class selectors help keep JavaScript behavior aligned with CSS naming conventions and UI state management.

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 class="b a"></div>

And both match:

$(".a.b")

4. Confusing multiple classes with nested elements

Broken assumption:

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

$(".a.b")

This does not match anything, because no single element has both classes.

5. Overusing complex selectors

This works:

$(".card.featured.visible.selected")

But too many combined classes can make code hard to read. If a selector becomes too specific, consider whether the markup or naming should be simplified.

jQuery selector comparison

$(".a")     // only class a
$(".b")     // only class b
$(".a, .b") // a or b
$(".a.b")   // a and b on the same element
$(".a .b")  // b inside a

The most common confusion is between:

• comma , → grouped selector
• no separator → same element must match all classes
• space → descendant selector

// 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

$(".a.b")

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")

This selects elements that have all three classes.

Does this use jQuery-specific syntax?

No. This follows standard CSS selector rules, and jQuery supports them.

Will .a.b match elements with extra classes too?

Yes. An element like <div class="a b c"> still matches because it contains both required classes.

• 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().