title: CSS selection of first column of first row of a table (excluding nested tables)
body: <p>I'm having difficulty with CSS selectors and I hope someone can perhaps help me out here.</p>
  
  <p>I have some HTML that looks like so:</p>
  
  <pre><code>&lt;table class=myTable&gt;
     &lt;tr&gt;
        &lt;td&gt;this is the td of interest&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td&gt;
           &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;I don't want this td!&lt;/td&gt;&lt;/tr&gt;
           &lt;/table&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I am trying to apply a background image to the FIRST td of the FIRST tr. So I tried the following:</p>
  
  <pre><code>table.myTable tr:first-child td:first-child {
      background-image: url(someUrl.gif);
  }
  </code></pre>
  
  <p>But this is also finding the first td of the first tr of the nested table. I've tried different combinations with > and +, but no luck. Anyone have any ideas?</p>
  
  <p>Note: I'm aiming for a solution that is compatible with IE7+.</p>