title: I need to limit CSS style cascading
body: <p>I have the following html:</p>
  
  <pre><code>&lt;div class="canvas red"&gt;
      &lt;div&gt;
          &lt;div class="canvas blue"&gt;
             &lt;div&gt;
                 has blue border
                 &lt;div class="canvas red"&gt;
                     ...
                     &lt;div&gt;
                     MUST HAVE RED BORDER
                     &lt;/div&gt;
                 &lt;/div&gt;           
             &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the css code:</p>
  
  <pre><code>div.canvas div {
      border-style: solid;
      border-width: 1px;
  }
  
  div.canvas.red div {
      border-width: 4px;
      border-color: red;
  }
  
  div.canvas.blue div {
  
      border-color: blue;
  }
  </code></pre>
  
  <p>The problems are 3:</p>
  
  <ul>
  <li><p>The innermost <code>div.canvas.red div</code> receives <code>blue</code> border because it is inside <code>div.canvas.blue</code> in the hierarchy. I need to stop this css inheritance so that the innermost <code>div.canvas.red div</code> will not get twisted by <code>div.canvas.blue</code>.</p></li>
  <li><p>I cannot control the nesting of the divs above, because of dynamically inserting components in the web page. There can be various nesting scenarios that I must handle. </p></li>
  <li><p>I must not change the css structure and the way it is applied - like <code>canvas</code> and <code>red</code>/<code>blue</code> etc being separate class names, instead of having <code>canvas_red</code> and <code>canvas_blue</code> as different classes.</p></li>
  </ul>
  
  <hr>
  
  <p>I do not plan to support IE6, therefore I can use the <code>&gt;</code> token in my css. However, I was unable to properly take advantage of it. I'd apreciate if you change my code using it more appropriately.</p>