Striped Table Rows with CSS

Technical Deep Dive & Specifications

The :nth-child() Pseudo-Class Mechanics

The :nth-child(arg) pseudo-class matches elements based on their 1-indexed position among sibling elements within the same parent container.

/* Direct keywords */
tbody > tr:nth-child(even) { background-color: #f8fafc; }
tbody > tr:nth-child(odd)  { background-color: #ffffff; }

The an + b Algebraic Formula

The argument inside :nth-child() can be expressed as a linear equation: $$\text{Index} = an + b \quad (n \ge 0)$$

• $a$ is the cycle step / frequency multiplier.
• $n$ is an integer counter starting at $0$ ($0, 1, 2, 3, \dots$).
• $b$ is the offset (the starting index shift).

WCAG 2.2 Contrast Math & Accessibility Compliance

A common rookie mistake is picking an alternating stripe color that is too dark (reducing text contrast) or picking custom text colors (like light gray subtext #94a3b8) that fail accessibility audits on striped rows.

Under WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum - Level AA):

• Body Text (< 18pt / < 14pt bold) requires a contrast ratio of at least 4.5:1 against the background.
• Large Text ($\ge$ 18pt / $\ge$ 14pt bold) requires a contrast ratio of at least 3.0:1.
• User Interface Components (SC 1.4.11 - Level AA): Row separators or border delineators must maintain at least 3.0:1 contrast against adjacent backgrounds if borders are the sole visual indicator of boundaries.

CONTRAST RATIO FORMULA (WCAG 2.2):
                    (L1 + 0.05)
Contrast Ratio = -----------------
                    (L2 + 0.05)

Where L1 is the relative luminance of the lighter color, 
and L2 is the relative luminance of the darker color.

+-------------------------------------------------------------------------------+
|                        ACCESSIBILITY CONTRAST MATRIX                          |
+-------------------------------------------------------------------------------+
| Background Color     | Text Color   | Contrast Ratio | WCAG 2.2 AA Status     |
+----------------------+--------------+----------------+------------------------+
| #FFFFFF (White row)  | #0F172A      | 16.1 : 1       | ✅ PASS (AAA Compliant)|
| #F1F5F9 (Stripe row) | #0F172A      | 14.3 : 1       | ✅ PASS (AAA Compliant)|
| #F1F5F9 (Stripe row) | #64748B      | 4.62 : 1       | ✅ PASS (AA Compliant) |
| #F1F5F9 (Stripe row) | #94A3B8      | 2.58 : 1       | ❌ FAIL (Under 4.5:1)  |
+-------------------------------------------------------------------------------+

Scoping & Nested Table Isolation

If you write a generic selector:

/* ⚠️ DANGEROUS: Pollutes nested tables and headers */
tr:nth-child(even) { background-color: #f1f5f9; }

Two severe bugs occur:

1. If the <thead> has a <tr>, it becomes child #1 of thead. In <tbody>, row 1 is child #1 of tbody. But if there is no <thead> and all rows are in <table>, row 1 (header) is colored white and row 2 is colored gray, flipping the stripe parity!
2. If any <td> contains a nested <table> (e.g. an expanded line-item breakdown), the nested table's <tr> elements will match the parent selector and inherit unpredictable background colors.

The Solution: Strict Direct Child Combinators

/* ✅ SENIOR PATTERN: Scoped strictly to direct tbody rows */
table.data-grid > tbody > tr:nth-child(even) {
  background-color: var(--table-stripe-bg);
}

Dynamic Filtering & The Modern S of selector Solution

When filtering rows with JavaScript (e.g., setting <tr hidden> or style="display: none"), traditional :nth-child(even) still counts the hidden elements in the DOM tree, causing visible rows to have two consecutive gray rows or two white rows (stripe parity collapse).

CSS Selectors Level 4 introduces the Selector List filter (of <selector>):

/* ✅ Modern CSS: Only counts elements matching the selector filter */
tbody > tr:nth-child(even of :not([hidden]):not(.is-filtered)) {
  background-color: #f8fafc;
}

DOM STATE WITH FILTERED ROWS:
Row 1: [Visible]   --> Match #1 (Odd)  --> White (#fff)
Row 2: [Hidden]    --> Skipped by 'of :not([hidden])'
Row 3: [Visible]   --> Match #2 (Even) --> Gray (#f8fafc)  <-- Parity Preserved!
Row 4: [Visible]   --> Match #3 (Odd)  --> White (#fff)

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 7–14 (:root tokens): Establishes accessible color pairs. --text-main (#0f172a) against --bg-stripe (#f8fafc) yields an exceptional contrast ratio of 14.3:1 (exceeding WCAG AAA). --text-muted (#475569) yields 5.4:1 (exceeding WCAG AA 4.5:1).
• Line 33–38 (.ledger-table): Uses border-collapse: separate; border-spacing: 0; to ensure cell backgrounds paint cleanly without clipping anomalies.
• Line 57–63 (.ledger-table > tbody > tr:nth-child(...)): Utilizes direct child combinators (>). This restricts zebra striping strictly to the top-level table's <tbody> rows and prevents styles from leaking into nested child tables.
• Line 72–77 (.nested-detail-table td): Explicitly overrides background color with #ffffff to guarantee that sub-tables inside an even (striped) row do not inherit murky background blends.

Expected Browser Render Output

+------------------------------------------------------------------------------------+
| Invoice ID     | Client & Project              | Execution Date | Amount           | (Dark Header)
+------------------------------------------------------------------------------------+
| INV-2026-001   | Acme Cloud Systems            | Aug 12, 2026   | $14,250.00       | (White Row)
+------------------------------------------------------------------------------------+
| INV-2026-002   | Global Logistics API          | Aug 14, 2026   | $8,100.00        | (Slate-50 Stripe)
|                | +---------------------------+ |                |                  |
|                | | Sub: $4200  | Sub: $3900  | | |                |                  | (Isolated white nested box)
|                | +---------------------------+ | |                |                  |
+------------------------------------------------------------------------------------+
| INV-2026-003   | FinTech Analytics Inc         | Aug 18, 2026   | $29,400.00       | (White Row)
+------------------------------------------------------------------------------------+
| INV-2026-004   | HealthPortal Systems          | Aug 20, 2026   | $11,800.00       | (Slate-50 Stripe)
+------------------------------------------------------------------------------------+