CSS Selector for Only Two Classes and No Others

CSS selector for only two classes and no others

You can consider attribute selector but pay attention to whitespaces and order:

[class="abc xyz"],[class="xyz abc"] {  color:red;}

<table><tr>  <td class="abc xyz">A</td>  <td class="abc xyz def">B</td>  <td class="abc xyz ghi">C</td>  <td class="abc xyz">D</td>  <td class="xyz abc">D</td>  <td class="abc xyz ">this will fail</td></tr></table>

Selector for element having one of two classes, but not both

You want :not(.first), :not(.last) which is the Selectors level 3-supported version of :not(.first.last) (from Selectors 4, not yet supported by all browsers, as well as jQuery):

ul.tabs > li.active:not(.first), ul.tabs > li.active:not(.last) {    background-color: #F00;}

<ul class="tabs">    <li class="first">1st</li>    <li class="active last">2nd</li></ul>
<ul class="tabs">    <li class="active first last">1st</li></ul>

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>

CSS rule to apply only if element has BOTH classes

div.abc.xyz {
    /* rules go here */
}

... or simply:

.abc.xyz {
    /* rules go here */
}

Can you target an element with CSS only if 2 classes are present?

Yes, just concatenate them: .content.main. See CSS class selector.

But note that the Internet Explorer up to version 6 doesn’t support multiple class selectors and just honors the last class name.

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.

Apply CSS rules only if set classes are present, and not others

Try this one. It will apply only on where the class name matches.

div[class*="ab"]{

 /* Write your style that  you want to apply  */

}

SCSS / CSS does not select element with two classes if i call only one

As the comments on your original post already suggest, it is probably a specificity problem where another CSS rule is overriding your own.

My Hint: In Firefox you can press Ctrl+Shift+I to open the Inspector. There you can toggle Pseudo Classes like shown in this image:

Then you can see if some other rule is overriding your own CSS rule.

(for example: in the picture shown, min-width of 1264 for html,body is overridden by min-width: auto;) - you can see it is crossed out.

How to put more than one class in css not() selector?

Two syntactic alternatives:

1. use two classes in one :not operator:

input[type=text]:hover:not(.ui-pg-input.mandatory){background-color: #D9EDF7;}

(note the removed blank between the classes)

2. use the :not operator twice:

input[type=text]:hover:not(.ui-pg-input):not(.mandatory){background-color: #D9EDF7;}

Note however that both have different meaning: the first uses an or operator, so it matches all elements not having both classes (so having none or one), whilst the second uses an and operator, thus matching all elements not having one or the other class (so having none). So it depends on what you want to do...

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?

---

Related Topics