Find Div Element by Multiple Class Names

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

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"));
  

How to locate an element with multiple classnames using Selenium and Python

You can't pass multiple classnames as argument through find_element_by_class_name() and doing so you will face an error as:

invalid selector: Compound class names not permitted

---

There are multiple approaches to solve this usecase and you can use either of the following Locator Strategies:

• If the element is uniquely identified only through the classname clean you can use:

  driver.find_element_by_class_name("clean")
  

• If the element is uniquely identified only through the classname right you can use:

  driver.find_element_by_class_name("right")
  

• If both the classnames, clean and right are mandatory to identify the element, you can use css-selectors as follows:

  driver.find_element_by_css_selector("li.clean.right")
  

• As an alternative you can also use xpath as follows:

  driver.find_element_by_xpath("//li[@class='clean right']")
  

---

tl; dr

Invalid selector: Compound class names not permitted error using Selenium

---

Reference

Find div element by multiple class names?

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.

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 a specify class name from multiple class in a div by using jquery?

Not exactly sure what you are trying to do, but this will get you all the classes for each element:

<div class="class1 class2 class3 class4"></div>
<div class="class1 classb classv classd"></div>
<div class="class1 classw classdf classl"></div>
<div class="class1 classl classo classj"></div>

$('div.class1').each(function() {
    console.log( $(this).attr('class').split(' ') )
})

Then you can do an indexOf on the arrays that are returned:

https://jsfiddle.net/nebulousal/y8yoofd4/1/

Find element with multiple classes selenium python

There're couples of ways how you can get the element:

driver_find_element_by_xpath("//button[@class='sqdOP  L3NKy   y3zKF     ']")

driver_find_element_by_xpath("//button[contains(@class,'sqdOP  L3NKy   y3zKF']")
    
driver_find_element_by_css_selector("button.sqdOP.L3NKy.y3zKF']")

driver_find_element_by_css_selector("sqdOP  L3NKy   y3zKF     ")

How to find element that has multiple class in selenium

This By.classname("btn btn-xs btn-custom") will not work, as it contains multiple spaces which means it is combination of 3 classes.

You will have to switch to css selector or xpath , I do not know why you have mentioned that you do not want to use both of them.

However, If you are interest to use css selector :

You can try this :

By.cssSelector("btn.btn-xs.btn-custom")  

If you go by precedence :

1. ID
2. name
3. classname
4. linkText
5. partialLinkText
6. tagName
7. css selector
8. xpath

find_element_by_class_name for multiple classes

The answer is No, You can't use driver.find_element_by_class_name () or driver.find_elements_by_class_name () with multiple class names. It accepts only single class name.

However, you can use find_elements_by_xpath or find_element_by_css_selector method to achieve finding element with multiple class names.

for example below code will find element on google website using two different class names.

url= "http://google.com"
driver = webdriver.Chrome()
driver.get(url)
driver.find_elements_by_xpath("//*[@class='sfibbbc' or @class='jsb']")
# Following line will result in error 
driver.find_elements_by_class_name("sfibbbc jsb")

---

Related Topics