Группировка css-селекторов

Question

Можно ли сгруппировать два селектора так, чтобы элемент соответствовал, только если оба селектора удовлетворены? Например, если я хочу, чтобы элемент удовлетворял обоим селекторам .a>.b~.c и .d~.e, возможно ли написать селектор, который соответствует пересечению этих селекторов?

Answer 1

Если вы используете селекторы классов, как в вашем примере, вы можете связать классы следующим образом:

.a > .b.d ~ .c.e

Выбирает элемент, который имеет class="c e"
который является родственным (то есть, идет, прямо или нет, после) элемента, который имеет как class="b d"
который является потомком некоторого элемента class="a"

Или, например, если вы хотите, чтобы .c.e появлялся после элемента, который имеет либо class b, либо d:

.a > .b ~ .c.e, .a > .d ~ .c.e

Выбирает элемент, который имеет оба class="c e"
который является родственным элементом с class="b" или class="d" (или обоими)
который является потомком некоторого элемента class="a"

Оба селектора подразумевают, что .b, .d и .c.e все являются потомками .a. Я также должен подумать, что это дает вам пересечение селектора класса, которое вы ищете.

Answer 2

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

Answer 3

Я думаю, что BoltClock находится на правильных линиях, но точно соответствует обоим селекторам, которые вам нужны

.a > .b ~ .d ~ .c.e, .a > .b.d ~ .c.e, .a > .d ~ .b ~ .c.e {
}

, поскольку у нас нет информации относительно взаимного расположения b и d.