title: Select only the first row in a table with css
body: <p>I have in an HTML page many tables, some of which are using only <code>tr &amp; td</code> others are using everything they can: <code>thead, tbody, tfoot, tr, th &amp; td</code>.</p>
  
  <p>Because some issues we are using a CSS rule to make the top and left border of the table and every <code>td</code> has its own right and bottom border. </p>
  
  <p>Because this particular thing we need to get the <code>td</code>'s in all four corners and round their specific corner.</p>
  
  <p>How can I do a single rule that can select only the first row in the table?</p>
  
  <p>I'm using this rule so far:</p>
  
  <pre><code>table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
  }
  table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
  }
  </code></pre>
  
  <p>In this jsfiddle you can see my problem: (<a href="http://jsfiddle.net/NicosKaralis/DamGK/" rel="nofollow">http://jsfiddle.net/NicosKaralis/DamGK/</a>)</p>
  
  <ul>
  <li>is there a way to solve the 2 implementations at the same time? </li>
  <li>if there is, how can I do it?</li>
  <li>if not, can you help me figure the best way to do it?</li>
  </ul>
  
  <p>P.S.: I can change the element of the tables, but it will make so much more refactoring in third party libraries, so we want not to change that.</p>