title: How can I apply styling to only first <tr> in a table, regardless of the <tbody> element?
body: <p>I have a table which contains multiple <code>tbody</code> elements — some created by the browser, and some that I have written in myself for programmatic reasons. I want to apply styling to only the first <code>tr</code> within my table, which I would normally use <code>table &gt; tr</code> for. However, my styling cannot assume that a <code>tbody</code> element does or does not exist, because I don't know that every user's browser is adding in <code>tbody</code> elements automatically in every case.</p>
  
  <p>As you can see, an unwanted border styling is applied to the first <code>tr</code> within the second <code>tbody</code> of this table. How can I get this to be applied to only the <em>first</em> <code>tr</code> in my table without regards to the presence of a <code>tbody</code> tag?</p>
  
  <p><a href="https://postimg.org/image/hlu0uj1wb/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mpgML.png" alt="Tr with unwanted styling"></a>
  </p>
  
  <h3><a href="https://jsfiddle.net/stamminator/7uzyLyab/" rel="nofollow noreferrer">JSFiddle demo</a></h3>
  
  <h2>CSS</h2>
  
  <pre><code>.my-table {
      border-collapse: collapse;
  }
      .my-table td,
      .my-table th {
          text-align: left;
          padding: 6px 8px;
          align-content: center;
          box-sizing: border-box;
      } 
      .my-table td[colspan="42"] {
        text-align: center;
        background-color: lightgray;
      }
      .my-table th {
          padding-top: 12px;
          padding-bottom: 12px;
          background-color: #0e3e64;
          color: white;
          text-align: center;
      }
      .my-table tr:not(:first-child) {
          border: 1px solid #efefef;
      }
  
      /*here's the styling I don't want applied to that third tr in my table*/
      .my-table tr:first-child {
          border: 1px solid #0e3e64;
      }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;table class="my-table"&gt;
    &lt;tr&gt;
      &lt;th&gt;Column 1&lt;/th&gt;
      &lt;th&gt;Column 2&lt;/th&gt;
      &lt;th&gt;Column 3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="42"&gt;Section 1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Cell 1&lt;/td&gt;
      &lt;td&gt;Cell 2&lt;/td&gt;
      &lt;td&gt;Cell 3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td colspan="42"&gt;Section 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Cell 1&lt;/td&gt;
        &lt;td&gt;Cell 2&lt;/td&gt;
        &lt;td&gt;Cell 3&lt;/td&gt;
      &lt;/tr&gt;      
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>