How to get elements with multiple classes

Question

Say I have this:

<div class="class1 class2"></div>

How do I select this div element?

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

That does not work.

I know that, in jQuery, it is $('.class1.class2'), but I'd like to select it with vanilla JavaScript.

Bitterblue · Answer 1 · 2019-12-19T09:34:23.017

349

AND (both classes)

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

OR (at least one class)

var list = document.querySelectorAll(".class1,.class2");

XOR (one class but not the other)

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND (not both classes)

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR (not any of the two classes)

var list = document.querySelectorAll(":not(.class1):not(.class2)");

edited Dec 19 '19 at 09:34

answered Dec 19 '19 at 09:19

Bitterblue

13,162
17
86
124

`var list = document.querySelector('.remove_fields.dynamic, .remove_fields.existing')` To get the `element` if it has any of the combination is present but not both. – Ahmad hamza Dec 30 '20 at 20:12
1

I just want to add something along with every other answers. If you want to select elements of specific tag type, for examle ``, that belongs to mulitple classes then you can specify the tag name along with the class names in `querySelectorAll()` in the following format `document.querySelectorAll("tagname.class1.class2.class3")` – letterphile Dec 29 '21 at 14:56

score 233 · Answer 2 · edited Jun 06 '19 at 01:11

233

It's actually very similar to jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

edited Jun 06 '19 at 01:11

Mark

765
8
12

answered Aug 25 '11 at 02:47

Joe

80,724
18
127
145

1

what about getting element with only one class , which is the one specified @Joe – CodeGuru Jan 13 '19 at 07:22
1

as I remember the classes comes without "." document.getElementsByClassName('class1 class2') – Misha Beskin Apr 15 '19 at 14:16
2

In the given MDN link, dot is not used before class names in getElements parameter. I checked this on firefox as well as chrome and it worked without dots, but not with dots. – Gaurav Singh Apr 25 '19 at 07:05

score 52 · Answer 3 · edited Nov 02 '16 at 16:43

52

querySelectorAll with standard class selectors also works for this.

document.querySelectorAll('.class1.class2');

edited Nov 02 '16 at 16:43

rogerdpack

62,887
36
269
388

answered May 26 '16 at 01:48

filoxo

8,132
3
33
38

4

That doesn't work, it needs to be `document.querySelectorAll('.class1, .class2');` – bazzlebrush Apr 18 '17 at 19:59
13

@bazzlebrush your selector would capture elements with `.class1` OR `.class2`, while the one above would only capture elements with *both* classes and does in fact work. See the console output of this test: https://jsfiddle.net/0ph1p9p2/ – filoxo Apr 18 '17 at 20:23
Ok, my bad, I misunderstood what the OP wanted to do. But IMO a more typical use case is to want to select elements which have either class or both, in which case my example is what you want. – bazzlebrush Apr 18 '17 at 20:56

score 22 · Answer 4 · answered Oct 20 '17 at 09:00

As @filoxo said, you can use document.querySelectorAll.

If you know that there is only one element with the class you are looking for, or you are interested only in the first one, you can use:

document.querySelector('.class1.class2');

BTW, while .class1.class2 indicates an element with both classes, .class1 .class2 (notice the whitespace) indicates an hierarchy - and element with class class2 which is inside en element with class class1:

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

And if you want to force retrieving a direct child, use > sign (.class1 > .class2):

<div class='class1'>
  <div class='class2'>
    :
    :

For entire information about selectors:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

score 2 · Answer 5 · edited Aug 06 '18 at 14:13

Okay this code does exactly what you need:

HTML:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

JS:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

Hope it helps! ;)

score 1 · Answer 6 · answered Jul 18 '18 at 05:50

html

<h2 class="example example2">A heading with class="example"</h2>

javascritp code

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

also learn more about https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Thank You ==

user2677034 · Answer 7 · 2017-04-30T21:54:13.263

actually @bazzlebrush 's answer and @filoxo 's comment helped me a lot.

I needed to find the elements where the class could be "zA yO" OR "zA zE"

Using jquery I first select the parent of the desired elements:

(a div with class starting with 'abc' and style != 'display:none')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];

then the desired children of that element:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

works perfectly! note you don't have to do document.querySelector you can as above pass in a pre-selected object.

How to get elements with multiple classes

7 Answers7

Linked

Related