title: CSS Classes & SubClasses
body: <p>Is it possible, other than what I'm doing because it doesn't seem to work, to do this? I want to be able to have subclasses that are under a class to use the CSS specifically for that class.subclass.</p>
  
  <p>CSS</p>
  
  <pre><code>.area1
  {
      border:1px solid black;
  }
  .area1.item
  {
      color:red;
  }
  .area2
  {
      border:1px solid blue;
  }
  .area2.item
  {
      color:blue;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="area1"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="item"&gt;Text Text Text&lt;/td&gt;
              &lt;td class="item"&gt;Text Text Text&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="area2"&gt; 
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="item"&gt;Text Text Text&lt;/td&gt;
              &lt;td class="item"&gt;Text Text Text&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So that I can just use class="item" for the elements under the parent css class "area1","area2". I know I can use class="area1 item" to get this to work, but I don't understand why it has to be so verbose about it. Shouldn't the css subclass look at what parent class it is under in order to define it?</p>
  
  <p>Note: this works in IE (using 7 right now), but in FF it does not, so I'm assuming this isn't a CSS standard way of doing something.</p>