CSS Selector that applies to elements with two classes

Question

Is there a way to select an element with CSS based on the value of the class attribute being set to two specific classes. For example, let's say I have 3 divs:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

What CSS could I write to select ONLY the second element in the list, based on the fact that it is a member of both the foo AND bar classes?

Answer 1

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>

The page will look like this:

• On supported browsers:

  1. Not selected as this element only has class foo.
  2. Selected as this element has both classes foo and bar.
  3. Not selected as this element only has class bar.

• In Internet Explorer 6:

  1. Not selected as this element doesn't have class bar.
  2. Selected as this element has class bar, regardless of any other classes listed.
  3. Selected as this element has class bar.

Answer 2

With SASS:

.foo {
  /* Styles with class "foo" */

  &.bar {
    /* Styles with class "foo bar" */
  }
}

See What is the meaning of an ampersand in Less selectors?

Answer 3

It can be done by two ways in SCSS.

Option 1

.foo.bar {
    // Styles with class "foo bar"
}

Option 2

.foo {
   &.bar {
        // Styles with class "foo bar"
    }
 }