You can style alternate (even or odd) table rows using the :nth-child() pseudo-class in CSS. This method lets you apply alternating background colors or styles without adding extra classes to each row.

Key Points About :nth-child()

1
:nth-child(odd) targets all odd-numbered rows (1st, 3rd, 5th, etc.).
2
:nth-child(even) targets all even-numbered rows (2nd, 4th, 6th, etc.).
3
It works based on the element’s position among its siblings in the DOM.

Example: Styling Alternate Table Rows

In this example, the :nth-child(odd) selector applies a light gray background to odd rows, while :nth-child(even) adds a light blue shade to even rows, making the table easier to read.

Best Practices

1
Use alternating row colors to improve table readability.
2
Combine with hover effects (e.g., tr:hover) for better interactivity.
3
Use :nth-of-type() if your table contains mixed elements like tr and th siblings.
4
Avoid hard-coded colors that reduce accessibility contrast.

Difficulty: 3/10

Topics: nth-child selector, CSS specificity, dynamic row styling

Scenario Questions

0-2 years experience

1
How would you style every other row in a static HTML table to have a light gray background without adding any classes or IDs?
2
What happens if you use nth-child(2n) instead of nth-child(even)? Does it behave the same, and why?

2-5 years experience

1
A table row background alternates correctly on initial load, but after filtering rows with JavaScript, the styling gets out of sync—how do you debug and fix this?
2
Your team’s table component uses inline styles for row colors, but the design system now requires alternating backgrounds. How would you refactor this without breaking existing functionality or requiring markup changes?

5-8 years experience

1
You’re optimizing a data-heavy table with 10,000+ rows that uses nth-child for alternating styles—how would you evaluate performance impact, and would you consider a different approach?
2
In a legacy app, alternating row styles are implemented with JS classes, but it’s causing reflows on every render. How would you migrate to pure CSS while maintaining accessibility and supporting older browsers?

8+ years experience

1
You’re designing a cross-team table component library used across 50+ products—how do you ensure alternating row styling is maintainable, themeable, and doesn’t conflict with user-customized CSS or third-party plugins?
2
A legacy system uses inline styles for row alternation, and migrating to CSS selectors risks breaking analytics or accessibility tools that rely on class names. How would you architect a backward-compatible solution with zero-downtime rollout?

Follow-up Questions

❓What if the table rows are added dynamically via JavaScript after page load?
❓How would you handle this if the table had nested rows or headers that shouldn't be styled?
❓Could this break if the table structure changes to include <thead> or <tfoot>?