'CSS Selector that applies to elements with two classes

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?



Solution 1:[1]

With SASS:

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

See https://stackoverflow.com/a/49401539/7470360

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1