How to Get Elements with Multiple Classes

How can I select an element with multiple classes in jQuery?

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

getElementsByClassName() with two classes

You can't do it with getElementsByClassName() method instead use querySelectorAll() method with comma separated class selectors.

document.querySelectorAll('.a,.b')

How to get class-name of element with multiple classes but only knowing 1 of them

It would have been easier (and faster) to try to write some code and test your question directly instead of asking in SO.

Or maybe reading the documentation for getElementsByClassName

[Sigh] you don't hace to specify the exact multiple classes. Running:

document.getElementsByClassName("one")

will give you an array with the four divs.

Select element with two classes

You could use querySelector (or querySelectorAll if there's more than one matching element and you want to get a reference to all of them):

var elem = document.querySelector(".page.current");

You can also actually just use getElementsByClassName, which accepts a space-separated list of class names:

var elems = document.getElementsByClassName("page current");

How to select an element with multiple classes in jQuery?

Question is very vague and doesn't explain exactly what you are trying to do but you probably want something like:

 $(this).find("tr.well.answers-list.radio-list").filter(function(){
      if($(this).hasClass('array2')){
           st+="inside array";
      }else{
            st+="not array";
      } 
 });

Using two CSS classes on one element

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

How can I select an element with multiple classes in CSS?

No. You should combine individual class names using .:

.twelve-col.col.main-menu

Find div element by multiple class names?

I don't think barak manos's answer has fully explained it.

Imagine we have few elements as the followings:

1. <div class="value test"></div>
2. <div class="value test "></div>
3. <div class="first value test last"></div>
4. <div class="test value"></div>

How XPath matches

• Match only 1 (exact match), barak's answer

  driver.findElement(By.xpath("//div[@class='value test']"));
  

• Match 1, 2 and 3 (match class contains value test, class order matters)

  driver.findElement(By.xpath("//div[contains(@class, 'value test')]"));
  

• Match 1, 2, 3 and 4 (as long as elements have class value and test)

  driver.findElement(By.xpath("//div[contains(@class, 'value') and contains(@class, 'test')]"));
  

Also, in cases like this, Css Selector is always in favor of XPath (fast, concise, native).

• Match 1

  driver.findElement(By.cssSelector("div[class='value test']"));
  

• Match 1, 2 and 3

  driver.findElement(By.cssSelector("div[class*='value test']"));
  

• Match 1, 2, 3 and 4

  driver.findElement(By.cssSelector("div.value.test"));
  

---

Related Topics