CSS селектор "(A или B) и C"?

Question

Это должно быть просто, но у меня возникают проблемы с поиском поисковых запросов.
Допустим, у меня есть это:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

В CSS, как я могу создать селектор, который соответствуетчто-то, что соответствует "(.a или .b) и .c"?

Я знаю, что мог бы сделать это:

.a.c,.b.c {
  /* CSS stuff */
}

Но, предполагая, что я собираюсь сделать этомного логики, с множеством логических комбинаций, есть ли лучший синтаксис?

Answer 1

есть ли лучший синтаксис?

Нет. Оператор CSS or (,) не разрешает группировки. По сути, это логический оператор самого низкого приоритета в селекторах, поэтому вы должны использовать .a.c,.b.c.

Answer 2

Пока нет, но есть экспериментальный селектор :matches(), который делает именно это:

:matches(.a .b) .c {
  /*stuff goes here */
}

Вы можете найти больше информации об этом здесь и здесь .В настоящее время большинство браузеров поддерживают его начальную версию :any(), которая работает аналогичным образом, но будет заменена на :matches().Нам просто нужно немного подождать, прежде чем использовать это везде (я, безусловно, буду).

Answer 3

Если у вас есть это:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

И вы хотите выбрать только те элементы, которые имеют .x и (.a или .b), вы можете написать:

.x:not(.c) { ... }

но это удобно, только когда у вас есть три «подкласса» и вы хотите выбрать два из них.

Выбор только одного подкласса (например, .a): .a.x

Выбор двух подклассов (например, .a и .b): .x:not(.c)

Выбор всех трех подклассов: .x

Answer 4

Нет. Стандартный CSS не обеспечивает то, что вы ищете.

Однако, возможно, вы захотите взглянуть на МЕНЬШЕ и SASS .

Это два проекта, целью которых является расширение синтаксиса CSS по умолчанию путем введения дополнительных функций, включая переменные, вложенные правила и другие улучшения.

Они позволяют вам писать гораздо более структурированный код CSS, и любой из них почти наверняка решит ваш конкретный вариант использования.

Конечно, ни один из браузеров не поддерживает их расширенный синтаксис (тем более что каждый из двух проектов имеет разный синтаксис и функции), но они предоставляют «компилятор», который преобразует ваш код LESS или SASS в стандартный CSS, который Вы можете развернуть на своем сайте.