Skip to content

Home

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.

See the embedded CodePen 

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

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

More like this

Start typing a keyphrase to see matching snippets.