How Can I Properly Style Even and Odd List Items Using CSS?

Styling Even and Odd Elements Using CSS

CSS pseudo-classes are a powerful tool for selecting and styling HTML elements based on their position or state. One common use case is alternating the appearance of elements within a list.

Initially, the following code may seem like a straightforward way to create a list of alternating colors:

However, this will result in all list items being blue. This is because when a style declaration is applied to both an element and its pseudo-class, the latter always takes precedence. In this case, li { color: blue } overrides li:odd { color:green } and li:even { color:red }.

To correctly alternate colors, we need to use the nth-child() pseudo-class:

The nth-child pseudo-class selects elements based on their position within their parent container, allowing us to target even and odd elements specifically.

Here's a live preview:

[Code Snippet]

The above is the detailed content of How Can I Properly Style Even and Odd List Items Using CSS?. For more information, please follow other related articles on the PHP Chinese website!