☰

:first-child が期待通りに動作しない 質問する

tag-icon • tag-icon css css-selectors
:first-child が期待通りに動作しない 質問する

というクラスを使用して、h1内の最初の を選択しようとしています。 がこの 内の最初の要素である場合は機能しますが、これより後に来る場合は機能しません。divdetail_containerh1divul

<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。どうすればこれを機能させることができますか?

ベストアンサー1

セレクター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;
}

おすすめ記事