Стилизация четных и нечетных элементов списка: псевдоклассы и 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 позволяет выбирать элементы в зависимости от их положения в списке, гарантируя, что к каждому элементу будет применен правильный стиль.