CSS селектор для элементов с двумя классами

Вы можете связать селекторы классов (без пробела между ними) следующим образом:

.foo.bar {
  /* Стили для элементов с классами foo И bar */
}

Однако, если вам нужно работать со старыми браузерами, такими как Internet Explorer 6, имейте в виду, что этот браузер неправильно обрабатывает цепочечные селекторы классов: он будет читать только последний селектор класса (в данном случае .bar), игнорируя остальные.

Чтобы продемонстрировать, как другие браузеры и IE6 интерпретируют это, рассмотрим следующий фрагмент:

* {
  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>

Страница будет выглядеть следующим образом:

• В поддерживаемых браузерах:

  1. Не выбран - этот элемент имеет только класс foo.
  2. Выбран - этот элемент имеет оба класса foo и bar.
  3. Не выбран - этот элемент имеет только класс bar.

• В Internet Explorer 6:

  1. Не выбран - этот элемент не имеет класса bar.
  2. Выбран - этот элемент имеет класс bar, независимо от других классов.
  3. Выбран - этот элемент также имеет класс bar.

Это можно сделать двумя способами в SCSS.

Вариант 1

.foo.bar {
    // Стили для класса "foo bar"
}

Вариант 2

.foo {
   &.bar {
        // Стили для класса "foo bar"
    }
}