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

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

<element class="a b">

So, only the elements that have both classes.

When I use $(".a, .b") it gives me the union, but I want the intersection.

- - Source


answered 9 year ago Sasha Chedygov #1

If you want an intersection, just write the selectors together without spaces in between.


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


answered 9 year ago Jamie Love #2

You can do this using the filter() function:


answered 6 year ago macio.Jun #3

Just mention another case with element:

E.g. <div id="title1" class="A B C">

Just type: $("div#title1.A.B.C")

answered 5 year ago juanpaulo #4

For the case

<element class="a">
  <element class="b c">

You would need to put a space in between .a and .b.c

$('.a .b.c')

answered 5 year ago user2298171 #5

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src=""></script>

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

answered 4 year ago Salman Abbas #6

Vanilla JavaScript solution:-


answered 3 year ago Tejas Shah #7

For better performance you can use


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

answered 3 year ago John Slegers #8

The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').

For more information, see the overview of the different ways to combine selectors herebelow!

Group Selector : ","

Select all <h1> elements AND all <p> elements AND all <a> elements :

$('h1, p, a')

Multiples selector : "" (no character)

Select all <input> elements of type text, with classes code and red :


Descendant Selector : " " (space)

Select all <i> elements inside <p> elements:

$('p i')

Child Selector : ">"

Select all <ul> elements that are immediate children of a <li> element:

$('li > ul')

Adjacent Sibling Selector : "+"

Select all <a> elements that are placed immediately after <h2> elements:

$('h2 + a')

General Sibling Selector : "~"

Select all <span> elements that are siblings of <div> elements:

$('div ~ span')

answered 1 year ago Surya R Praveen #9

Group Selector

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Becomes this:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

So in your case you have tried the group selector whereas its an intersection

$(".a, .b") 

instead use this


answered 4 mon ago Sandwell #10

You do not need jQuery for this

In Vanilla you can do :


answered 2 week ago bahman parsamanesh #11

You can use getElementsByClassName() method for what you want.

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>

This is the fastest solution also. you can see a benchmark about that here.

comments powered by Disqus