Select an element with multiple classes in jQuery

The basic concept of jQuery is to select one or more elements using element ID, Class, Attribute, Compound CSS Selector and do something with them. Let’s see how to select an element with multiple classes.

For simple selection you can use following code as below.

Selecting Elements by ID:

$( "#Id" );

Selecting Elements by Class Name:

$( ".ClassName" );

Selecting Elements by Attribute:

$( "input[name='username']" );

Selecting Elements by Compound CSS Selector:

$( "#wrapper ul.list li" );

But, if you want to select an element with multiple classes then using comma you can achieve this.

<p class="Class_1">First Class</p>
<p class="Class_2">Second Class</p>

$( "p.Class_1, p.Class_2" ).css( "border", "2px solid red" );

But, in this case you can get union, not intersection.

If you want an intersection, just put the selectors together without spaces in between them. So, for an element that has an ID of a with classes b and c, you would write:

$('#a.b.c')

Using the filter function you can get this:

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

Using a Vanilla JavaScript solution you can do the same.

document.querySelectorAll('.a.b')

Read Also:

• Get selected text from drop down list in jQuery
• Difference between prop() and attr() in jQuery

You can get jQuery reference for multiple selector.