How to Style Even and Odd List Items

Solution with the CSS :nth-child pseudo-class

You can easily style the even and odd items of a list using the :nth-child pseudo-class with the even and odd keywords, respectively.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of styling even list items:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:nth-child(even) {
        background: #74d686;
        font-size: 20px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Some text</li>
      <li>Lorem Ipsum</li>
    </ul>
  </body>
</html>

Result

  • Lorem Ipsum
  • Some text
  • Lorem Ipsum

Example of styling odd list items:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:nth-child(odd) {
        background: #74d686;
        font-size: 20px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Some text</li>
      <li>Lorem Ipsum</li>
    </ul>
  </body>
</html>

And in our last example, see how to style both the odd and even items of an unordered list.

Example of styling both the "odd" and "even" list items:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:nth-child(odd) {
        background: #74d686;
        font-size: 24px;
        color: #ffffff;
      }
      li:nth-child(even) {
        background: #d6d6d6;
        font-size: 20px;
        color: #666;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Some text</li>
      <li>Lorem Ipsum</li>
      <li>Some text</li>
    </ul>
  </body>
</html>