html - アクティブ :firstchild スタイリング

Question

現在、メニューの最初の要素を (:firstchild 疑似を介して) 別の色で着色しています。ただし、最初の要素が (display:none を介して) 非表示になる場合があり、アクティブな最初の要素を色付けしたいと考えています。

非表示の要素は firstchild としてカウントされないことを期待していましたが、:firstchild 疑似を介してまだスタイル設定されているようです。

この場合、どうすればよいですか？

Answer 1

次のようにします。

<ul>
    <li class="hidden">Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
</ul>

li:first-child {
    color: red;
}

.hidden {
    display: none;
}

.hidden + li {
    color: red;
}

クラスを追加して要素を非表示にし、隣接する子セレクター ( +) で 2 番目の要素をスタイリングします。

デモ