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:
You can get jQuery reference for multiple selector.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.