How to Select an Element With Multiple Classes in Jquery

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

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:


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


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


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

How to select an element with multiple classes in jQuery?

Question is very vague and doesn't explain exactly what you are trying to do but you probably want something like:

st+="inside array";
st+="not array";

jQuery selector to select ONLY specific 2 classes, excluding any other?

Second edit: Using just css this selector will select both cases class 'a' in first place or in second place:

$('div[class="a b"],div[class="b a"]')

Edit: You need to filter the selection and exclude elements with a third class:

.filter(function() {
return this.classList[2] == null;

$('.a.b')    .filter(function() {    return this.classList[2] == null;    })    .addClass('red');
div{  height:100px;  width:100px;  background:black;  float:left;}.red{  background:red;}
<script src=""></script><div class="a"></div><div class="a b"></div><div class="a b c"></div>

Selector multiple class in parent

Instead of using string concatenation of generate the selector, just use jQuery's .find() method:

$('.a .b .c').find('.c2, .c3')

If you prefer supplying the parent's context, you can also do this:

var $parent = $('.a .b .c');
$('.c2, .c3', $parent);

This approach will work if you want to bind the click event to the elements without relying on event bubbling:

// Solution 1
$('.a .b .c').find('.c2, .c3').click(function() {
// Handle click event

// Solution 2
var $parent = $('.a .b .c');
$('.c2, .c3', $parent).click(function() {
// Handle click event

In the event that you need to indeed rely on event bubbling, then you will have to check against the event target's parents:

$('body').on('click', '.c2, .c3', function() {  // GUARD: Do not proceed if element is not a child of `.a .b .c`  var $t = $(this);  if (!$('.a .b .c').find($t).length) {    return;  }    // Handle click event  console.log('clicked');});
.c1, .c2, .c3 {  cursor: pointer;  color: green;}
.a .b .c .c1,.foobar .foobaz .foobarbaz .c1, .foobar .foobaz .foobarbaz .c2,.foobar .foobaz .foobarbaz .c3 { cursor: not-allowed; color: red;}
<script src=""></script>
<p>Elements are child of <code>.a .b .c</code>.</p>
<div class="a"> <div class="b"> <div class="c"> <div class="c1"> C1 (will not fire event) </div> <div class="c2"> C2 (will fire event) </div> <div class="c3"> C3 (will fire event) </div> </div> </div></div>
<hr />
<p>Elements are not child of <code>.a .b .c</code>.</p>
<div class="foobar"> <div class="foobaz"> <div class="foobarbaz"> <div class="c1"> C1 (will not fire event) </div> <div class="c2"> C2 (will not fire event as parents do not match) </div> <div class="c3"> C3 (will not fire event as parents do not match) </div> </div> </div></div>

Selecting multiple classes with jQuery

This should work:

$('.myClass, .myOtherClass').removeClass('theclass');

You must add the multiple selectors all in the first argument to $(), otherwise you are giving jQuery a context in which to search, which is not what you want.

It's the same as you would do in CSS.

Jquery Selecting a class when multiple class are present

You can use multiple selectors with jQuery:

$('.content_nav a.pos1_path, .content_nav a.pos2_path').toggleClass('current');

If you want both classes to exist in order to select the element, then you can do something like this:

$('.content_nav a.pos1_path.pos2_path').toggleClass('current');

I've left out the string concatenation for clarity.

Access elements having multiple classes using jQuery

Simply use this selector :


className gives you all the classes names separated by spaces ("a b c"). But for css and jquery selectors you can't use "a b c".

What you did was

$('.a b c')

which means "the c elements in b elements in elements of class a".

Related Topics

Leave a reply