css - :first-child すべての子要素を対象とする

Question

「ナビゲーション」のIDといくつかの子リスト項目要素を持つ順序付けられていないリストがあります。

最初の項目だけを選択しようとしています:first-childが、これで使用する CSS を他のすべてのリスト項目に適用しています。

ul#navigation li:first-child{
    background:#fff;
}

繰り返しますが、これはすべてのリスト項目に白い背景を与えています。最初の要素を選択したいだけです。何がうまくいかないのですか？

Answer 1

コメントによると、問題はマークアップが次のようになることです。

<ul id="navigation">
    <a href="http://google.com">
        <li>Google</li>
    </a>
</ul>

このモデルliの下で every がどのようになるかに注意してください。:first-childリスト項目内にアンカーをネストする、より適切な構造を使用することをお勧めします。アンカーでリスト アイテムを埋めたい場合は、表示をブロックに設定します。

<ul id="navigation">
    <li><a href="http://google.com">Google</a></li>
</ul>

付属の CSS を使用すると、次のようになります。

#navigation a { display: block }

これらの構造上の変更が整ったら、セレクターは最初のリスト項目をターゲットにする必要があります。

/* > to target only immediate list items */
#navigation > li:first-child {
    background: red;
}