title: Selecting a table row with a particular class using first-child
body: <p>I've found an odd bug where the CSS <code>:first-child</code> selector doesn't seem to be able to select a table row for me. </p>
  
  <p>I have the following table </p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class="a"&gt;
          &lt;td&gt;a&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="b"&gt;
          &lt;td&gt;b&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="b"&gt;
          &lt;td&gt;b&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="c"&gt;
          &lt;td&gt;c&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="c"&gt;
          &lt;td&gt;c&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to add a row before the first instance of tr.b. </p>
  
  <p>This code will not work:</p>
  
  <pre><code>$("table tr.b:first-child").before("&lt;tr&gt;&lt;td&gt;using css selector&lt;/td&gt;&lt;/tr&gt;");
  </code></pre>
  
  <p>but this will work fine:</p>
  
  <pre><code>$("table tr.b").first().before("&lt;tr&gt;&lt;td&gt;using jquery first()&lt;/td&gt;&lt;/tr&gt;");
  </code></pre>
  
  <p>Is this a known issue, or am I doing something wrong? I don't mind using jQuery but I don't understand why this isn't working with pure CSS. </p>
  
  <p>Here's a fiddle of it:</p>
  
  <p><a href="http://jsfiddle.net/5d6YX/" rel="nofollow">http://jsfiddle.net/5d6YX/</a></p>