：first-childが期待どおりに機能しない

96

私が最初に選択しようとしているh1内部のA divと呼ばれるクラスではdetail_container。h1this内の最初の要素である場合は機能しますが、この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>

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

css css-selectors

— マフィンマン
ソース

1

CSSができないことは何でも、JavaScriptはできます。

— JCOC611 2010

11

これはCSS3でできることですが:)

— BoltClock

216

h1:first-childセレクタ手段

要素である
場合にのみ、親の最初の子を選択しh1ます。

:first-childここのコンテナのはであり、したがってul満足できませんh1:first-child。

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

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

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

.detail_container h1.first
{
    color: blue;
}

— ボルトクロック
ソース

2

現在は理解していますが、標準を作成したときに両方のバージョンを実装する必要があったと思います。

— マフィンマン

IE9リリースでは機能しません。開発者ツールでh1：unknown

— Cine

11

互換性リストの:first-of-typeセレクタ。

— Jess Telford

4

新しい互換性リストの:first-of-type。古いリンクが正しくありません。

— BadHorsie、2015年

私の考えでは:first-child、項目をCSSセレクターとして定義し、h1その後、選択したDOMレベルですべての「最初の子を取得する」と考えるため、この用語は明確ではありません。私はそれを何度も間違って使用しました... :first-of-typeセレクターに慣れ、そのタイプの最初の子について考える必要があります。

— カイノアック2017年

13

:first-child最初は、選択h1 している場合にのみあれば、それは、その親要素の最初の子です。あなたの例でulは、はの最初の子ですdiv。

疑似クラスの名前はやや誤解を招きやすいですが、ここではかなり明確に説明されていますが、仕様ではでれています。

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

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

— ロブ・ソバース
ソース

あなたの権利は誤解を招くものです。私は以前にjQueryを使用してこれを実行したことがあるので、私は主に混乱しました。

— マフィンマン

9

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

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

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

— グレック
ソース

問題はないはずです。ここでは、ref w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

あなたも使うことができます

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

番号1を他の番号で変更することにより、他の任意のh1アイテムを選択できます。

— ファブリス
ソース

1

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

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

— ゴーストトースト
ソース

0

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

— エドモンドチャウ
ソース