Styling List Items Based on Position: Even and Odd

A common web design task is to visually differentiate elements within a list, often by alternating styles for even and odd list items. This can improve readability and create a more engaging user experience. This tutorial demonstrates how to achieve this using CSS pseudo-classes.

Understanding the `:nth-child()` Pseudo-class

The core of styling even and odd list items lies in the :nth-child() CSS pseudo-class. This powerful selector allows you to target elements based on their position within their parent. The general syntax is:

:nth-child(an + b)

Let’s break down what this means:

a: Represents the cycle size.
n: A counter that starts at 0 and increments for each element.
b: The offset or starting point.

By adjusting the values of a and b, you can target specific elements based on their position.

Targeting Odd List Items

To style odd list items, we want to select the first, third, fifth, and so on. We can achieve this with the following CSS:

li:nth-child(odd) {
  /* Styles for odd list items */
  color: #777; /* Example: Dark gray text */
}

This selector effectively means "select every element that is an odd number". Alternatively, you can use 2n + 1 for the same result.

li:nth-child(2n + 1) {
  /* Styles for odd list items */
  color: #777;
}

Targeting Even List Items

Similarly, to style even list items (second, fourth, sixth, etc.), we can use the following CSS:

li:nth-child(even) {
  /* Styles for even list items */
  color: blue;
}

Or, equivalently:

li:nth-child(2n) {
  /* Styles for even list items */
  color: blue;
}

This selector means "select every element that is an even number".

Example

Here’s a complete example that demonstrates how to alternate the colors of list items:

<!DOCTYPE html>
<html>
<head>
<title>Even and Odd List Items</title>
<style>
li {
  color: black;
}

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

li:nth-child(even) {
  color: blue;
}
</style>
</head>
<body>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

</body>
</html>

This code will render a list where odd items have dark gray text and even items have blue text.

Browser Compatibility

The :nth-child() selector enjoys excellent browser support. However, older versions of Internet Explorer might require the 2n + 1 and 2n syntax for reliable results. As of 2024, support is widespread across all major browsers, including Chrome, Firefox, Safari, and Edge.

Beyond Lists

While this tutorial focuses on list items, the :nth-child() selector can be applied to any HTML element, allowing you to style elements based on their position within their parent container. This opens up a wide range of design possibilities.