How to Select an Element with 2 Classes

How to select an element with 2 classes

You can chain class selectors without a space between them:

.a.b {
     color: #666;
}

Note that, if it matters to you, IE6 treats .a.b as .b, so in that browser both div.a.b and div.b will have gray text. See this answer for a comparison between proper browsers and IE6.

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/

CSS Selector that applies to elements with two classes

Chain both class selectors (without a space in between):

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

---

If you still have to deal with ancient browsers like Internet Explorer 6, be aware that it doesn't read chained class selectors correctly: it'll only read the last class selector (.bar in this case) instead, regardless of what other classes you list.

To illustrate how other browsers and IE6 interpret this, consider this snippet:

* {
  color: black;
}

.foo.bar {
  color: red;
}

<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

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

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

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 apply two CSS classes to a single element

1) Use multiple classes inside the class attribute, separated by whitespace (ref):

<a class="c1 c2">aa</a>

2) To target elements that contain all of the specified classes, use this CSS selector (no space) (ref):

.c1.c2 {
}

jQuery selector to select ONLY specific 2 classes, excluding any other?

Second edit: Using just css this selector will select both cases class 'a' in first place or in second place:

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

Edit: You need to filter the selection and exclude elements with a third class:

$('.a.b')
    .filter(function() {
        return this.classList[2] == null;
    });

---

$('.a.b')    .filter(function() {    return this.classList[2] == null;    })    .addClass('red');

div{  height:100px;  width:100px;  background:black;  float:left;}.red{  background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="a"></div><div class="a b"></div><div class="a b c"></div>

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

---

Related Topics