Использование OR в селекторах CSS

Question

У меня есть элемент, который появляется на многих страницах, и я хотел бы стилизовать его по-разному в зависимости от класса высокоуровневого div, в котором он присутствует. Например, если я хочу изменить цвет своего логотипа в зависимости отна «типе» страницы, на которой он присутствует.Тогда давайте предположим, что эти типы могут быть сгруппированы (поэтому typeA, typeB и typeC должны использовать один цвет, а typeD и typeE должны использовать другой).Кроме того, поскольку высокоуровневые div-ы эти типы используются и для других вещей, поэтому они не могут быть объединены.

.typeA #logo,
.typeB #logo,
.typeC #logo{
color: #ffffff;
}

.typeD #logo,
.typeE #logo,{
color: #000000;
}

Есть ли способ связать вместе с некоторым селектором, чтобы мне не пришлось делатьэтот код выглядит так противно.Этот пример небольшой, но в реальной версии используется гораздо больше типов.Есть ли способ сделать что-то вроде:

.typeA || .typeB || .typeC #logo{
color: #ffffff;
}

Answer 1

Как говорили другие, CSS не поддерживает такого рода группировки.

Если у вас есть контроль над разметкой, почему бы просто не добавить общий класс в каждую группу классов типов, а затем выбрать этот общий класс?

Пример:

<div class="typeA type1">
    <span id="logo">Site Title</span>
</div>

<div class="typeD type2">
    <span id="logo">Site Title</span>
</div>

.type1 #logo { color: #ffffff; }
.type2 #logo { color: #000000; }

Answer 2

Это невозможно с чистым CSS.Однако это можно сделать с помощью мета-языка, такого как SASS.Проверьте http://sass -lang.com / для получения дополнительной информации.

Answer 3

Извините, не в простом CSS, нет. Существуют проекты, такие как http://sass -lang.com / , которые требуют, чтобы внешний компилятор делал то, что вы хотите.

Answer 4

Короче говоря: нет.

Существуют системы, подобные LESS , которые делают это возможным, но отрендеренный css все равно будет выглядеть как ваш первый пример

Answer 5

В css нет "или", о котором я знаю. Просто используйте другой селектор, который является родителем типов A, B и C, например «containerA» или «containerB»