Styling von geraden und ungeraden Listenelementen: Pseudoklassen vs. n-tes Kind

Wenn Sie versuchen, mithilfe von CSS-Pseudoklassen abwechselnde Farben für Listenelemente zu erreichen, kann dies der Fall sein auf Probleme stoßen. Obwohl es logisch erscheinen mag, li:odd und li:even für diesen Zweck zu verwenden, kann das Verhalten unvorhersehbar sein.

Um gerade und ungerade Instanzen von Listenelementen effektiv zu formatieren, sollten Sie den folgenden Ansatz in Betracht ziehen:

Statt:

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

Verwenden:

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

Durch Ersetzen von :odd und :even durch :nth-child(odd) und :nth-child(even) wird der gewünschte alternierende Farbeffekt erreicht. Dies liegt daran, dass Sie mit :nth-child Elemente basierend auf ihrer Position in der Liste auswählen können, um sicherzustellen, dass auf jedes Element der richtige Stil angewendet wird.