title: CSS override rules and specificity
body: <p>I'm often confused by CSS override rules: in general, I realize that more specific style-sheets override less specific ones, and that specificity is determined by how many selectors are specified.  There's also the <code>!important</code> keyword, which plays a role as well.</p>
  
  <p>So, here's a simple example: I have a table with two table cells.  The table itself has a CSS rule which applies to all cells within the table.  However, the second table cell has it's own rule which should override the general table rule:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type = "text/css"&gt;
  
  table.rule1 tr td {
      background-color: #ff0000;
  }
  
  td.rule2 {
      background-color: #ffff00;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table class = "rule1"&gt;
          &lt;tr&gt;
              &lt;td&gt;abc&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class = "rule2"&gt;abc&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But... when I open this in a browser, I see that <code>rule2</code> doesn't override <code>rule1</code>.  Okay - so I guess I need to make <code>rule2</code> more "specific", but I can't really define any further selectors since I just want to apply it to a particular table cell.  So, I tried putting the <code>! important</code> keyword, but that doesn't work either.</p>
  
  <p>I'm able to override <code>rule2</code> if I wrap the text node in a <code>&lt;div&gt;</code>, like:</p>
  
  <pre><code>        &lt;td class = "rule2"&gt;&lt;div&gt;abc&lt;/div&gt;&lt;/td&gt;
  </code></pre>
  
  <p>...and then make the CSS rule more specific:</p>
  
  <pre><code>td.rule2 div {
      background-color: #ffff00; !important
  }
  </code></pre>
  
  <p>This works, but it's not exactly what I want.  For one thing, I want to apply the rule to the <em>table cell</em>, not the DIV.  It makes a difference because you can still see the background color of <code>rule1</code> as a border around the div.</p>
  
  <p>So, what do I need to do to tell CSS I want <code>rule2</code> to override <code>rule1</code> for the <code>td</code> element?</p>