Zebra-Striped List Template

Improve the readability of long or dense lists with classic alternating row colors.

This "zebra-striping" technique makes it easier for the human eye to scan across rows without losing their place.

A list of items with alternating light and dark background colors for each row.

About this Template

This component uses the handy CSS :nth-child() pseudo-class to apply different styles to alternating list items. It's built on a semantic unordered list and uses Flexbox to create a simple two-column layout within each row, making it ideal for presenting key-value pairs or item-and-status information. This is a purely CSS-driven effect that is simple to implement and highly effective.

Features

Enhanced Readability: Alternating row colors guide the user's eye and make dense data easier to scan.
Pure CSS Solution: Uses the :nth-child(odd) or :nth-child(even) pseudo-class to create the effect with no JavaScript required.
Semantic Markup: Built on a standard ul, appropriate for any list of items.
Self-Contained Code: All styles are scoped to the .zebra-list-template class to prevent conflicts.
Easy Theming: All colors, including the primary and alternate row colors, can be changed easily via CSS variables.

Code Breakdown

The structure is a simple unordered list, ul, with the class .zebra-list. Inside each list item, li, a flexbox container with display: flex and justify-content: space-between is used to push the item name and its corresponding value to opposite ends of the row.

The key to the zebra-striping effect is this CSS selector: .zebra-list li:nth-child(odd). This targets every odd-numbered list item (the 1st, 3rd, 5th, etc.) and applies a different background color to it. The rest of the list items (the even ones) retain the default background color, creating the striped pattern.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zebra-Striped List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #475569;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Zebra-Striped List Component Styles - Copy from here
           ========================================================================== */
        .zebra-list-template {
            --zebra-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --zebra-primary-text-color: #1e293b;
            --zebra-secondary-text-color: #64748b;
            --zebra-bg-color: #ffffff;
            --zebra-alt-bg-color: #f8fafc; /* The lighter stripe color */
            --zebra-border-color: #e5e7eb;
            
            font-family: var(--zebra-font-family);
            color: var(--zebra-primary-text-color);
            width: 100%;
            max-width: 600px;
        }

.zebra-list-template *,
        .zebra-list-template *::before,
        .zebra-list-template *::after {
            box-sizing: border-box;
        }

.zebra-list-template .list-header {
            padding: 1rem 1.5rem;
            background-color: #e2e8f0;
            border-bottom: 1px solid var(--zebra-border-color);
            border-top-left-radius: .5rem;
            border-top-right-radius: .5rem;
        }

.zebra-list-template .list-header h2 {
            font-size: 1.125rem;
            margin: 0;
            font-weight: 600;
        }
        
        .zebra-list {
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid var(--zebra-border-color);
            border-top: none; /* Header has top border */
            border-bottom-left-radius: .5rem;
            border-bottom-right-radius: .5rem;
            overflow: hidden; /* Important for border-radius on children */
        }
        
        .zebra-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .75rem 1.5rem;
        }

/* The zebra striping effect */
        .zebra-list li:nth-child(odd) {
            background-color: var(--zebra-alt-bg-color);
        }
        
        .zebra-list .item-value {
            font-weight: 500;
        }

</style>
</head>
<body>

<div class="zebra-list-template">
    <header class="list-header">
        <h2>Warehouse 13-B Inventory</h2>
    </header>

<ul class="zebra-list">
        <li>
            <span class="item-name">Uncertainty-Proof Umbrella</span>
            <span class="item-value">3 Units</span>
        </li>
        <li>
            <span class="item-name">Socks of Infinite Recursion</span>
            <span class="item-value">1 Pair (theoretically)</span>
        </li>
        <li>
            <span class="item-name">Pre-Loved Black Hole</span>
            <span class="item-value">1 Unit (handle with care)</span>
        </li>
         <li>
            <span class="item-name">Self-Solving Rubik's Cube</span>
            <span class="item-value">7 Units</span>
        </li>
         <li>
            <span class="item-name">Bottled Deja Vu</span>
            <span class="item-value">4 Liters</span>
        </li>
         <li>
            <span class="item-name">Anti-Gravity Paperclips</span>
            <span class="item-value">250 Count (approx.)</span>
        </li>
    </ul>
</div>

</body>
</html>

View Output