javascript - div の最初の子のみを表示する

Question

div の最初の子のみを表示し、残りをすべて非表示にする方法を見つけるのに苦労しています。これは純粋に css で行うことができますか、それとも Javascript を使用する必要がありますか?

では、これを最初のp-tagのみを表示するにはどうすればよいですか?

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

http://jsfiddle.net/8XYNx/

Answer 1

との組み合わせは確実にそれを行うはずです:not：first-child

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

これはバージョン 9 より前の IE では機能しないことに注意してください。

Answer 2

これを試して

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

CSS

  #test1 p{
    display:none;

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

Answer 3

:first-childラップインを使用することにより:not()：

フィドル

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

first-childIE8 以前ではサポートされていないことに注意してください。完全なクロス ブラウザ サポートが必要な場合は、Javascript を使用する必要があります。

Javascript ソリューションは次のようになります。

フィドル

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

あなたの例では要素のみを使用pしましたが、他の要素が含まれている場合は? 一般に、最初の要素のみを表示するには、これを使用できます。

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

これは IE<9 では機能しないことに注意してください。

フィドルのデモ。

Answer 6

すべての P 要素を非表示にしてから、最初の p 要素を暗黙的に表示します。

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

デモ

aDOCTYPEが宣言されている場合、これは IE7+ で機能します。ここでブラウザーの互換性を確認してください( IE7.jsを使用しない限りIE9 でのみ機能する:notを使用するのとは異なります)

Answer 7

これを試してみてください。IE7+で動作するはずです

CSS

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

jsfiddleについて

古いサポートが必要な場合は、クロスブラウザーにする必要があります。

Javascript

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

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

jsfiddleについて

Answer 8

試す

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

Answer 9

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

デモ