Select Element Based on 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').)

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

No. You should combine individual class names using .:

.twelve-col.col.main-menu

How to return ONE element based on class with multiple classes

This can be achieved easily with javascript. Just check if the classList of a <div> is equal to just the class you want to select. If it is not equal it means that the classList contains more than one class.

function getValue(){  var divs = document.getElementsByClassName("one");    for(var i=0; i < divs.length; i++)  {    if(divs[i].classList == 'one')    {        alert(divs[i].innerHTML);    }  }}

<div class="one">hi</div><div class="one two">there</div><div class="one two three">coffee?</div><div class="one">not today?</div>
<input type="button" onclick="getValue()" value="click me" />

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

Select an element from multiple classes

2021 update:

Most browsers now support :is() pseudo-class. This lets us express the same selector more succinctly:

:is(.about-me, .education, .skills, .experience, .things-love) img { 
  width: 80% 
}

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Old solution

Add img after each container like this:

.about-me img, 
.education img, 
.skills img, 
.experience img, 
.things-love img { 
  width: 80% 
}

Or add a class to imgs and target them directly

...
<div class="about-me">
   <img class="container-img" src="...">
</div>
...

.container-img {
  width: 70%;
}

Select elements with different classes (Not one element with multiple classes)

This should do it:

var elements = document.querySelectorAll(".column, .column2");

Select element based on multiple classes

You mean two classes? "Chain" the selectors (no spaces between them):

.class1.class2 {
    /* style here */
}

This selects all elements with class1 that also have class2.

In your case:

li.left.ui-class-selector {

}

Official documentation : CSS2 class selectors.

As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?

Select an element using two different classes by partial text

The ^= relates to the beginning of the whole class atribute string, that's why thing2_ won't be matched. You could use *= instead, like this:

div[class*="thing1_"][class*="thing2_"]{ }

But that would also match some_class_thing1_. That might still filt your needs, if you can be sure that such a class will never exist. But otherwise, I don't see a pure CSS solution.

How do I select an element with multiple classes in order

If those elements have no other classes, you can select them by attribute

$('[class="a b"]')

There's also the attributes-starts-with, and -ends-with selector, and the attribute-contains selector, that would pick up the elements even if they did have more classes

$('[class*="a b"]')

note : this would also match ...class="what a bad idea"

Plain JS supports the attribute selectors in querySelector[All]

But this is a bad idea, it shouldn't matter what order the classes are in, and if it does, you're doing something wrong.