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.
You can use this trick to apply different styles to any other elements that are part of a group of siblings.
See the embedded CodePen
/* Zebra striped list */
li:nth-child(odd) {
background-color: #ccc;
}
/* Zebra striped table */
tr:nth-child(even) {
background-color: #ccc;
}
