How can I hide all <h2>’s except the first one?

<div class="holder">
  <h2>SOme heading</h2>
  <h2>Some Heading<h2>
  <h2>Some Heading<h2>
  <h2>Some Heading<h2>
  <h2>Some Heading<h2>
</div>

I am familiar that we can use something like:

p:nth-child(2) {
  display:none;
}

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.


solution

Here is one option using the adjacent sibling selector

jsFiddle example

.holder h2 + h2 {
  display:none;
}

Probably your best option as + is supportted by IE7+

Selectors such as nth-child/:not only work in IE9+