How can I select an element with multiple classes in jQuery?

Here’s a detailed guide with multiple examples to select elements with multiple classes in jQuery, covering various scenarios and edge cases:

1. Basic Selection (AND Logic)

Select elements that have both classes active and user:

<div class="active">Div 1</div>
<div class="user">Div 2</div>
<div class="active user">Div 3</div>

// Selects ONLY Div 3 (both classes)
$(".active.user").css("background", "yellow");

2. Three Classes

Select elements with classes box, red, and large:

<div class="box red large">Box 1</div>
<div class="box blue">Box 2</div>

// Selects ONLY "Box 1"
$(".box.red.large").addClass("highlight");

3. Combine with Element Type

Select <li> tags with classes item and done:

<ul>
  <li class="item">Item 1</li>
  <li class="item done">Item 2</li>
</ul>

// Selects the second <li>
$("li.item.done").css("text-decoration", "line-through");

4. Use with jQuery Methods

Add a class to elements with both error and required:

<input class="error" type="text">
<input class="error required" type="text">

// Adds "blink" to the second input
$(".error.required").addClass("blink");

5. Event Handling

Attach a click event to buttons with both btn and primary:

<button class="btn">Cancel</button>
<button class="btn primary">Submit</button>

// Triggers only when the "Submit" button is clicked
$(document).on("click", ".btn.primary", function() {
  alert("Primary button clicked!");
});

6. Check for Multiple Classes

Loop through elements and check for multiple classes:

<div class="box active">Box A</div>
<div class="box">Box B</div>

$(".box").each(function() {
  if ($(this).hasClass("box") && $(this).hasClass("active")) {
    console.log("This box is active:", $(this).text());
  }
});

7. Combine with Attribute Selectors

Select elements with classes thumbnail and new, and a data-id attribute:

<img class="thumbnail" src="img1.jpg">
<img class="thumbnail new" src="img2.jpg" data-id="123">

// Selects the second image
$(".thumbnail.new[data-id]").fadeOut();

8. Exclude Elements with :not()

Select elements with task and pending but not archived:

<div class="task pending">Task 1</div>
<div class="task pending archived">Task 2</div>

// Selects only Task 1
$(".task.pending:not(.archived)").css("color", "green");

9. Dynamic Elements

Add a class to dynamically created elements with both card and featured:

// Dynamically add an element
$("body").append('<div class="card featured">New Card</div>');

// Works even after element creation
$(".card.featured").addClass("glow");

10. Common Mistakes & Fixes

❌ Incorrect (space between classes):

// Selects descendants of .menu with class .active (not the same element)
$(".menu .active");

✅ Correct:

// Selects elements with BOTH classes
$(".menu.active");

❌ Incorrect (using commas):

// Selects elements with EITHER class (OR logic)
$(".error, .warning");

✅ Correct:

// Selects elements with BOTH classes
$(".error.warning");

Key Takeaways:

• Use .class1.class2 (no space) for AND logic.
• Combine with element types (div.class1.class2) or attributes ([attr]) for specificity.
• Use :not() to exclude classes.
• Works seamlessly with dynamic elements and jQuery methods like addClass, on, etc.

This covers most practical scenarios!