Zebra striped list or table

Zebra striped lists and tables are a great way to improve the readability of your content. By using the :nth-child(odd) or :nth-child(even) pseudo-class selectors, you can apply different background colors to elements based on their position in a group of siblings.
> [!TIP]
>
> You can use this trick to apply different styles to any other elements that are part of a group of siblings.
https://codepen.io/chalarangelo/pen/VwoLNMR

/* Zebra striped list */
li:nth-child(odd) {
  background-color: #ccc;
}

/* Zebra striped table */
tr:nth-child(even) {
  background-color: #ccc;
}

>
> You can use this trick to apply different styles to any other elements that are part of a group of siblings.
https://codepen.io/chalarangelo/pen/VwoLNMR

From 30-seconds-of-code: zebra-striped-list-or-table