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.
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')
.)
You can do this using the filter()
function:
$(".a").filter(".b")
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')
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')
$('.a .b , .a .c').css('border', '2px solid yellow'); //selects b and c
Just mention another case with element:
E.g. <div id="title1" class="A B C">
Just type: $("div#title1.A.B.C")
Vanilla JavaScript solution:-
document.querySelectorAll('.a.b')
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.
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 comma
$('.a.b')
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")
You do not need jQuery
for this
In Vanilla
you can do :
document.querySelectorAll('.a.b')
Below example will give you idea about to select at a time multiple nested class selectors and direct class selectors in one line
//Here is Explaination of Selectors //.a .b .c = selects nested child c which is inside of div a and b //.a .d = selects nested child d which is inside of div a //.f = selects direct element ie div f which is outside of div a and b $('.a .b .c , .a .d, .f').css('background-color', 'grey');
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]);
This is the fastest solution also. you can see a benchmark about that here.
var elem = document.querySelector(".a.b");
Success story sharing
b
andc
are dynamically added, and you only want to select the element if it has those classes..a .b
searches for elements with classb
that are descendants of an element with classa
. So something likediv a
will only returna
elements that are inside adiv
element.