Welcome to tutel.me
  • Home
  • programming
  • how can i select an element with multiple classes in jquery

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

By Mladen

2009-06-24 22:28:58 8 Comments

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.

13 comments

@Savan 2019-10-10 08:05:11

your code $(".a, .b") will work for below multiple elements (at a same time)

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

if you want to select element having a and b both class like <element class="a b"> than use js without coma

$('.a.b')

@Karim Ali 2019-10-04 17:16:26

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

@Sasha Chedygov 2009-06-24 22:30:43

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').)

@Sasha Chedygov 2012-08-07 17:19:52

@Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

@Flater 2012-08-08 08:29:16

Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

@Chris Halcrow 2012-08-26 23:54:11

This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

@Shimmy 2013-05-09 05:16:12

Does a space between the class names make any difference?

@Sasha Chedygov 2013-05-12 23:49:01

@Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

@AaA 2015-10-13 09:04:20

it seems in jquery 1.10 you need to separate classes with comma ,

@Sasha Chedygov 2015-10-15 03:41:25

@AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

@Abhijay Ghildyal 2016-11-16 14:21:10

is this wither class a or b, or is it class and b?

@Sasha Chedygov 2016-11-17 17:13:45

@AbhijayGhildyal: This is for elements that match both classes.

@Abhijay Ghildyal 2016-11-18 11:48:51

@sasha thanks. What do i do if I have an 'or' case? eg:- class A or class B

@Corey P 2018-10-16 17:28:17

@AbhijayGhildyal I know this is kind of late, but $(.a,.b) would do the trick.

@bahman parsamanesh 2018-08-01 10:41:07

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

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

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

@Sandwell 2018-04-04 08:00:13

You do not need jQuery for this

In Vanilla you can do :

document.querySelectorAll('.a.b')

@Michiel 2019-03-18 10:42:15

True in 2018, but not wnen this question was asked in 2009

@user2298171 2013-04-19 07:19:21 

$('.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>

@Surya R Praveen 2017-05-17 13:57:26

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

$(".a.b")

@Jamie Love 2009-06-24 22:34:38

You can do this using the filter() function:

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

@Daniel Allen Langdon 2011-08-09 14:32:08

What is the difference between this answer and the accepted one?

@Sasha Chedygov 2011-09-08 09:39:38

@Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

@pac 2012-02-09 22:28:22

This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

@Sasha Chedygov 2012-02-14 10:19:58

@pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

@barrymac 2013-02-19 12:13:33

I can use this chained onto a .find for an exceptional situation

@Qix 2014-03-12 21:50:19

This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

@user3281466 2014-09-08 11:53:42

@SashaChedygov So if I have 3 div elements with classes 'a b', 'a c', 'a d' (respectively) and want to select the divs that have the class a AND either the class b or the class c, is this how I can achieve it: $(".a").filter(".b .c") ?

@Sasha Chedygov 2014-09-08 17:27:06

@user3281466: Close, but no. .b .c looks for a div with class "c" inside of a div with class "b". What you're looking for is $('.a').filter('.b, .c'). Or, without filter: $('.a.b, .a.c')

@juanpaulo 2013-03-25 20:31:05

For the case

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

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

$('.a .b.c')

@Ipsita Rout 2013-04-06 09:07:40

Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

@Mr47 2013-09-16 13:20:37

@IpsitaRout $('.a .b, .a .c') should do the trick

@Daniel W. 2014-08-22 09:43:50

In this example, would the selector $('.a .c.b') also work ?

@Zim84 2018-09-02 08:40:23

Yes, as the order does not matter.

@Alex 2018-09-03 11:54:33

$('.a > element')

@John Slegers 2016-01-20 22:24:46

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 :

$('input[type="text"].code.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')

@Tejas Shah 2015-09-28 05:26:30

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.

@Salman von Abbas 2015-01-29 18:02:58

Vanilla JavaScript solution:-

document.querySelectorAll('.a.b')

@macio.Jun 2012-12-14 16:15:11

Just mention another case with element:

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

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

Related Questions

Sponsored Content

56 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

65 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

31 Answered Questions

14 Answered Questions

[SOLVED] How to move an element into another element?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1056065 View
  • 1619 Score
  • 14 Answer
  • Tags:   javascript jquery html

14 Answered Questions

[SOLVED] How can I select an element by name with jQuery?

19 Answered Questions

[SOLVED] How can I get the ID of an element using jQuery?

13 Answered Questions

[SOLVED] event.preventDefault() vs. return false

29 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2369276 View
  • 2205 Score
  • 29 Answer
  • Tags:   javascript jquery

34 Answered Questions

20 Answered Questions

[SOLVED] jQuery get specific option tag text

Sponsored Content