仅显示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

try this

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

CSS

  #test1 p{
    display:none;

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

Answer 2

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 3

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";
    }
}

Answer 4

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

http://www.w3.org/TR/CSS2/selector.html#first-child

Answer 5

By hiding all the P elements, and then implicitly displaying the first p element:

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

DEMO

If a DOCTYPE is declared, this will work in IE7+. Check the browser compatibility here (unlike using :not which will only work in IE9 unless you use IE7.js )

Answer 6

display: none on every element except the first (1n w/ 2 offset).

#test1 p:nth-child(1n + 2){
display: none;
}

DEMO

Answer 7

Try this, should work with IE7+

CSS

#test1>p ~ p{
    display: none;
}

On jsfiddle

If you need older support then this should be cross-browser.

Javascript

var test1 = document.getElementById("test1").getElementsByTagName("p"),
    i = 1,
    p = test1[i];

while (p) {
    p.style.display = "none";
    p = test1[i += 1];
}

On jsfiddle

Answer 8

$('#test1 p:not(:first-child)').hide();

演示

Answer 9

看看这个URL，使用psudo元素选择要应用CSS的特定元素http://www.w3schools.com/CSS/css_pseudo_elements.asp

Answer 10

Try

#test1 p:not(:first-child)
{
    visibility:hidden;
}

Answer 11

In your example you used only p elements, but if there are some other elemens included? In general, to show only the first element, you can use this:

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

Notice this doesn't work in IE<9.

A fiddle demo .