web-dev-qa-db-ja.com

：最初の子が期待どおりに機能しない

h1というクラスを持つdiv内の最初のdetail_containerを選択しようとしています。 h1がこのdiv内の最初の要素である場合は機能しますが、このulの後にある場合は機能しません。

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

このdivのどこにいても、最初のh1を選択するというCSSの印象を受けました。どうすればそれを機能させることができますか？

csscss3css-selectors
78
The Muffin Man

h1:first-childセレクターは

親の最初の子を選択します
_h1要素の場合のみ。

ここのコンテナの:first-childはulであるため、h1:first-childを満たすことができません。

あなたのケースにはCSS3の:first-of-typeがあります：

.detail_container h1:first-of-type
{
    color: blue;
}

しかし、ブラウザの互換性の問題など、最初のh1にクラスを与えてから、そのクラスをターゲットにした方が良いでしょう：

.detail_container h1.first
{
    color: blue;
}
189
BoltClock

_:first-child_は、最初の_h1_ifを選択し、ifが親要素の最初の子である場合にのみ選択しますあなたの例では、ulはdivの最初の子です。

擬似クラスの名前はやや誤解を招くかもしれませんが、仕様でかなり明確に説明されています here .

jQueryの_:first_セレクターは、探しているものを提供します。あなたはこれを行うことができます：

$('.detail_container h1:first').css("color", "blue");

11
Rob Sobers

その特定のケースでは、次を使用できます。

.detail_container > ul + h1{ 
    color: blue; 
}

しかし、多くの場合に同じセレクターが必要な場合は、BoltClockが言ったように、それらのクラスが必要です。

8
Grekz

あなたも使用できます

.detail_container h1:nth-of-type(1)

数字の1を他の数字で変更すると、他のh1アイテムを選択できます。

4
Fabrice

h1タグは別のdivにあり、最初のタグはfirst-child。 divにはスタイルさえ必要ありません。それはそれらの子供たちを分離するための単なる方法です。

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
1
GhostToast

要素は<body>タグから直接継承できません。 <dir style="padding-left:0px;"></dir>タグに入れてみてください。

0
Edmond Chow