Using OR in CSS selectors

I have an element which appears on many pages and I would like to style it differently based on t开发者_开发技巧he class of the high-level div which it is present in. For example, if I want to change the color of my logo depending on the "type" of page it is present on. Then let's say these types can be grouped (so typeA, typeB and typeC should use one color while typeD and typeE should use another). Also, as high-level div's these types are used for other things as well so they cannot be merged.

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

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

Is there a way to chain together with some selector so that I don't have to make this code look so nasty. This example is small but the real-world version involves a whole lot more types. Is there a way to do something like:

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

As others said, CSS doesn't support that kind of grouping.

If you have control over your markup, why not just add a common class to each group of type classes then select that common class?

Example:

<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; }

In short: no.

There are systems like LESS which make this possible but the rendered css will still look like your first example

Sorry, not in straight CSS, no. There are projects like http://sass-lang.com/ that require an external compiler to do what you want, however.

This isn't possible with pure CSS. It can be done however with a meta language like SASS. Check out http://sass-lang.com/ for more information.

There is no "or" in css that i know of. Just use a different selector that is a parent of typeA,B and C like "containerA" or "containerB"