CSS Сокращение для идентификации нескольких классов

Question

Я прочитал это руководство по использованию регулярных выражений с селекторами CSS и пытаюсь экстраполировать: есть ли сокращение CSS для выполнения следующих действий?Я хочу выбрать все div с классом "foo", которые имеют дополнительный класс "a", "b", "c" или "d".

    .foo.a,
    .foo.b,
    .foo.c,
    .foo.d {
       /* stuff */
    }

что-то вроде:

.foo[class~='a','b','c','d'] {}?

Answer 1

В настоящее время это невозможно (с рекомендацией «Селекторы 3»). Для CSS не существует полноценной грамматики регулярных выражений, и нет способа разбить части нескольких списков селекторов.

Селекторы 4 предлагают новый :matches() псевдокласс, основанный на оригинальной реализации :any() Mozilla (см. этот ответ для ознакомления с историей):

.foo:matches(.a, .b, .c, .d)

Конечно, пока не ожидайте поддержки браузера. Я мог бы даже забыть обновить этот ответ, когда придет время, но ... посмотрим.

Answer 2

Нет, ваш первый способ написать это правильно. Вы можете искать только одно совпадение за раз с помощью селектора атрибутов, поэтому самая близкая вещь, представляющая собой смесь двух ваших методов:

.foo[class~="a"],
.foo[class~="b"],
.foo[class~="c"],
.foo[class~="d"] {
   /* stuff */
}

Что на самом деле не является сокращением или чем-то еще: P Лучший способ выбора по классам - это обычный способ с .className. Селекторы атрибутов действительно полезны только для выбора других атрибутов, или если у вас есть класс, который начинается с определенного слова и использует css3. Например, вы можете использовать что-то вроде:

.foo[class^="mah-class"]{ }

Что будет соответствовать mah-class-a mah-class-b mah-classAHHH ... и т. Д.

Answer 3

Может быть .foo[class~='a'][class~='b'][class~='c'][class~='d']?