title: Can you target an element with CSS when inherited classes are present?
body: <p>You may have multiple classes on an element separated by a space:</p>
  
  <pre><code>&lt;div class="header contaminated"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>and you can <a href="https://stackoverflow.com/questions/640996/can-you-target-an-element-with-css-only-if-2-classes-are-present">target that <code>div</code> using <code>.header.contaminated</code> selector</a>.</p>
  
  <p>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 <strong><em>parent</em></strong>:</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>&lt;div class="contaminated"&gt;
    &lt;div class="header"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Normally i want to style a <code>header</code> as blue:</p>
  
  <pre><code>.header { background-color:  #99FFFF; }
  </code></pre>
  
  <p>But if a <code>div</code> is <code>contaminated</code> then i color the entire background red:</p>
  
  <pre><code>.contaminated { background-color: Pink; }
  .contaminated.header { background-color: HotPink; }
  </code></pre>
  
  <p>Except i don't think the css selector syntax <code>.contaminated.header</code> is valid for "inherited" styles. </p>
  
  <blockquote>
    <p><strong>Note</strong>: The reason i don't think it's valid is because it doesn't work</p>
  </blockquote>
  
  <p>Is it possible to target an element with CSS if it only contains two classes, and some of the classes are "inherited" ?</p>
  
  <p><a href="http://jsfiddle.net/r8Lfa/1/" rel="nofollow noreferrer"><strong>jsFiddle sandbox</strong></a></p>