Q:

Only display the first child of a div

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/

A:

try this
http://jsfiddle.net/8XYNx/10/
CSS
  #test1 p{
    display:none;

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

A:

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.

A:

By using :first-child wrapped in :not():
Fiddle
#test1 p:not(:first-child) {
    display:none;
}

Note that first-child isn't supported by IE8 or earlier. If you want complete cross browser support, you will have to use Javascript.
A Javascript solution would be:
Fiddle
var div = document.getElementById("test1");
var pList = div.getElementsByTagName("p");

for(var i=0; i<pList.length; i++) {
    if(pList[i] != div.children[0]) {
        pList[i].style.display = "none";
    }
}

