Это должно быть просто, но мне сложно найти условия поиска для него.
Скажем, у меня есть это:
<div class="a c">Foo</div>
<div class="b c">Bar</div>
В CSS, как я могу создать селектор, который соответствует тому, что соответствует "(.a или .b) и .c"?
Я знаю, что смогу сделать это:
.a.c,.b.c {
/* CSS stuff */
}
Но, полагая, что мне придется делать такую логику много, с множеством логических комбинаций, есть ли лучший синтаксис?
Есть ли лучший синтаксис?
Нет. Оператор CSS or (,) не позволяет группировать. Это, по сути, логический оператор с наименьшим приоритетом в селекторах, поэтому вы должны использовать .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, который вы можете развернуть его на своем сайте.