CSS-селектор «(A или B) и C»?

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

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

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

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

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

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

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

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

Пока нет, но есть экспериментальная :matches()функция псевдокласса, которая делает именно это:

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

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

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

<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

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

Тем не менее, вы можете захотеть посмотреть на LESS и SASS .

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

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

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