How can I select an element with multiple classes in jQuery?
I want to select all the elements that have the two classes
<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.
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
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:
Read more... Read less...
For the case
<element class="a"> <element class="b c"> </element> </element>
You would need to put a space in between
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
For more information, see the overview of the different ways to combine selectors herebelow!
Group Selector : ","
<h1> elements AND all
<p> elements AND all
<a> elements :
$('h1, p, a')
Multiples selector : "" (no character)
<input> elements of
text, with classes
Descendant Selector : " " (space)
<i> elements inside
Child Selector : ">"
<ul> elements that are immediate children of a
$('li > ul')
Adjacent Sibling Selector : "+"
<a> elements that are placed immediately after
$('h2 + a')
General Sibling Selector : "~"
<span> elements that are siblings of
$('div ~ span')
$('.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>