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

<element>

So, only the elements that have both classes.

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

3

14 Answers

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

2

You can do this using the filter() function:

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

For the case

<element> <element> </element> </element>

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

$('.a .b.c')
0

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
<script src=""></script> <div>a <div>b</div> <div>c</div> <div>d</div> </div>

Just mention another case with element:

E.g. <div>

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> <element>

if you want to select element having a and b both class like <element> 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')
0

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>a</li> <li>a, b</li> <li>a, b, c</li> </ul>

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

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');
<script src=""></script> <div>a <div>b <div>c</div> </div> <div>d</div> </div> <div>e</div> <div>f</div>

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