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

Question

I want to select all the elements that have the two classes a and b.

So, only the e

Answer 1

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Answer 2

You can do this using the filter() function:

$(".a").filter(".b")

Answer 3

var elem = document.querySelector(".a.b");

Answer 4

If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:

$('.a.b')

The order is not relevant, so you can also swap the classes:

$('.b.a')

So to match a div element that has an ID of a with classes b and c, you would write:

$('div#a.b.c')

(In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)

Answer 5

For better performance you can use

$('div.a.b')

This will look only through the div elements instead of stepping through all the html elements that you have on your page.

Answer 6

Vanilla JavaScript solution:-

document.querySelectorAll('.a.b')