Question

You may have multiple classes on an element separated by a space:

<div class="header contaminated">...</div>

and you can target that div using .header.contaminated selector.

That’s fine when both classes are directly applied to an element. i want to target an element with CSS that has both styles, but one style comes from the parent:

Example

<div class="contaminated">
  <div class="header">...</div>
</div>

Normally i want to style a header as blue:

.header { background-color:  #99FFFF; }

But if a div is contaminated then i color the entire background red:

.contaminated { background-color: Pink; }
.contaminated.header { background-color: HotPink; }

Except i don’t think the css selector syntax .contaminated.header is valid for “inherited” styles.

Note: The reason i don’t think it’s valid is because it doesn’t work

Is it possible to target an element with CSS if it only contains two classes, and some of the classes are “inherited” ?

jsFiddle sandbox

Answer 1

This is basic CSS – separate the class names by a space, that implies/applies the cascade:

.contaminated .header { ... }

Anything wrong with that?

Cheers