Как правильно написать css селектор с регуляркой?

Question

[Дамир Саяхов]

Почему может не срабатывать данное правило?

a:not([class^="bg"]){
   background-color: #999;
}

Дословно тут написано: Для элементов A, кроме тех, у которые есть класс, начинающийся на "bg" применить следующее правило.
Это правило применяется для всех элементов A.
Не могу понять почему.
Спасибо.

Answer 1

[V Sh.]

Селектор :not работает только с простыми селекторами: элементов/тегов, классов, псевдоэлементов, универсальных(*) и идентификаторов.

Можно вот так:

a {
   background-color: #999;
};
a[class^="bg"] {
  background-color: something;
}

Comments

[Дамир Саяхов]

Я так понял, что в селекторах :not нельзя использовать регулярки.
А у меня есть классы. Например bg-red(их нельзя модицифировать и их очень много).
И соль тут такая, что если нет такого модификатора для элемента, но нужно его подкрашивать дефолтным цветом, т.е. #999.
А если есть, то соответственно стилем, который соответствует bg-red или другим bg-*
Получается это невозможно(без использования !important у классов типа bg-*)?

[V Sh.]

Дамир Саяхов: Нет, ну почему так сразу !important? Просто сделайте два правила CSS: одно для всех ссылок по умолчанию (цвет у всех ссылок "белый"), затем правило для переопределения. Одни и те же свойства (например, background-color) у селекторов одинаковой специфичности (интересная вещь, можете погуглить "CSS специфичность") переопределяются в порядке следования правил CSS. Таким образом, вывод: сначала пишем общие правила, потом специфичные, потом еще специфичнее и т.д.

[Дамир Саяхов]

А если картина такая что в таблице стилей дефолтный цвет нужен не просто для всех ссылок, а для
".block .block-2 A.default"

А в таблице стилей с цветами(bg-*) используется запись
".bg-red{background-color: #ff0000}"
Получается в любом случае дефолтное правило имеет больший приоритет.
Но я да сразу не сказал об этом.
Я собственно поэтому и заморочился так с not

[V Sh.]

Дамир Саяхов: Ну... вообще у вас, по-хорошему, должно быть вот так: .block .block-2 a.bg-red { ... }. Т.е. селекторы одного уровня специфичности. Это не только правильно, но и удобно с точки зрения семантики. Взглянув на селектор сразу становится понятно где он лежит в html-коде. Я бы просто дополнил селектор с классом bg-red.

[Дамир Саяхов]

Селекторы вида bg-* нельзя менять. (таких правил примерно ~1400). Так нужно для данного проекта.
Подобные стили могут быть использованы в абсолютно разных местах.
Поэтому менять их специфичность нельзя. Видимо остаётся вариант только !important, но буду искать ещё другие, т.к. очень плохой вариант.

[V Sh.]

Дамир Саяхов: А почему тогда цвет ссылок по-умолчанию не задается также каким-нибудь классом bg-default? Похоже, что у вас что-то типа БЭМ, но не везде он же и учитывается)

[Дамир Саяхов]

Сейчас да первый опыт БЭМ и сразу проект ультрабольшой. И есть набор цветовых модификаторов и других модификаторов(типа .p-20 = padding:20px) Знаю что для каждого блока. элемента должен быть свой отдельно описанный модификатор. Эти все модификаторы идут отдельно от БЭМ уже.
А вариант с bg-default наверное единственный адекватный в этом случае.
Спасибо, что уделили время.

Answer 2

[Владимир]

В качестве дополнения предыдущего ответа
https://www.w3.org/TR/css3-selectors/#negation

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument