title: How to hide all child elements except first child element using CSS
body: <p>I have a table which is looping dynamically. Now I need to hide all <code>&lt;tr&gt;</code> with the class <code>.dynamic-tr</code> except 1st table's <code>&lt;tr class="dynamic-tr"&gt;</code> by using CSS.</p>
  
  <pre><code>&lt;table class="dynamic-table"&gt;
    &lt;tr class="dynamic-tr"&gt;
      &lt;th&gt;Resource Name&lt;/th&gt;
      &lt;th&gt;Allocation&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;John&lt;/td&gt;
      &lt;td&gt;100%&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="dynamic-table"&gt;
    &lt;tr class="dynamic-tr"&gt;
      &lt;th&gt;Resource Name&lt;/th&gt;
      &lt;th&gt;Allocation&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Alex&lt;/td&gt;
      &lt;td&gt;50%&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="dynamic-table"&gt;
    &lt;tr class="dynamic-tr"&gt;
      &lt;th&gt;Resource Name&lt;/th&gt;
      &lt;th&gt;Allocation&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Bryce&lt;/td&gt;
      &lt;td&gt;100%&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have tried with this CSS but its not working. Can somebody please suggest.</p>
  
  <pre><code>.dynamic-table .dynamic-tr {
    display: none;
  }
  .dynamic-table:first-of-type .dynamic-tr {
    display: block;
  }
  </code></pre>