title: Hide all except first child of an element using pure css
body: <p>I am trying to hide every other child after first child of classa class element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.classa {
      display:none;
  }
  div.classa:first-child {
      display:block !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
      &lt;h3&gt;abc&lt;/h3&gt;
      &lt;div class="classa"&gt;some content&lt;/div&gt;
      &lt;h3&gt;xyz&lt;/h3&gt;
      &lt;div class="classa"&gt;more content&lt;/div&gt;
      &lt;h3&gt;header3&lt;/h3&gt;
      &lt;div class="classa"&gt;another content&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to achieve this using pure css.</p>