BinaryDevelop
  1. ホーム
  2. css

[解決済み] :first-child が期待通りに動作しない

2022-02-09 15:12:59

質問

最初の 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>

私の持っているCSSでは、最初に選択された h1 のどこにあっても、この div . どうしたらうまくいくのでしょうか？

どのように解決するのですか？

その 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;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します