title: How can I hide all <h2>'s except the first one?
body: <p>How can I hide all <code>&lt;h2&gt;</code>'s except the first one? </p>
  
  <pre><code>&lt;div class="holder"&gt;
    &lt;h2&gt;SOme heading&lt;/h2&gt;
    &lt;h2&gt;Some Heading&lt;h2&gt;
    &lt;h2&gt;Some Heading&lt;h2&gt;
    &lt;h2&gt;Some Heading&lt;h2&gt;
    &lt;h2&gt;Some Heading&lt;h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am familiar that we can use something like: </p>
  
  <pre><code>p:nth-child(2)
  {
    display:none;
  }
  </code></pre>
  
  <p>But not sure how to hide all except the first one.  Can someone point me in the right direction? Would like something that is cross-browser compatible. </p>