偶数および奇数のリスト要素のスタイリング: 疑似クラスと nth-child

CSS 疑似クラスを使用してリスト項目の色を交互に設定しようとすると、問題に遭遇します。この目的で li:odd と li:even を使用するのは論理的であるように思えるかもしれませんが、動作は予測できない場合があります。

リスト項目の偶数インスタンスと奇数インスタンスを効果的にスタイル設定するには、次のアプローチの使用を検討してください:

代わりに:

li { color: blue }
li:odd { color:green }
li:even { color:red }

使用:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

:odd と :even を :nth-child(odd) と :nth-child(even) に置き換えることで、望ましい交互のカラーリング効果が得られます。これは、:nth-child を使用すると、リスト内の位置に基づいて要素を選択できるため、各項目に正しいスタイルが適用されることが保証されます。