it-swarm.com.ru

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 */
}

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

145
Josh

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

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

115
Matt Ball

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

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

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

19
Metalcoder

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

<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

11
Šime Vidas

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

Однако вы можете посмотреть LESS и SASS .

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

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

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

4
Spudley