Only display the first child of a div

Question

I've been struggling with finding a way to only display the first child of my div and hide all the rest. Can this be done purely in css or do I have to involve some Javascript?

So, how can I get this to only display first p-tag?

<div id="test1">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
</div>

http://jsfiddle.net/8XYNx/

Answer 1

A combination of :not and first-child should surely do it:

#test1 p:not(:first-child) {
    display: none;
}

Note that this won't work in IE before version 9.

Answer 2

try this

http://jsfiddle.net/8XYNx/10/

CSS

  #test1 p{
    display:none;

}
#test1 p:first-child{
    display:block;
}