Question

I have an element which appears on many pages and I would like to style it differently based on the 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;
}

Answer 1

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