Alternate background colors for list items

html

responsive-design

css-preprocessors

best-practices

byNikita Barsukov·Nov 18, 2024

Efficiently alternate the background colors of list items using CSS :nth-child pseudo-class. Here's the simple solution:

li:nth-child(odd) { 
    /* When the list says "Odd, I know", but CSS got your back */
    background: #eee;  
}

li:nth-child(even) { 
   /* Because everyone loves a bit of even-tual consistency */
   background: #ddd;
}

Next, dive into this CSS and deck out odd/even list items with different colors, achieving a clean and crisp zebra-stripe effect.

Ensure scalability

While projecting about more list items in future, align your solution towards robustness right from the start:

Manageability: Make your CSS endure any quantum of list items without a hint of alteration.
Performance: Banking on CSS for styling manifests a more responsive UX and paces faster than JavaScript.
Reusability: Draft your styles to enable ease in usage at multiple avenues.

CSS preprocessors (such as Sass or Less) can modulate style management, entertain the use of variables and functions for colors, and simplify adjustments as your project expands.

Keep it simple

Simplicity spells supremacy. Making your CSS comprehensible implies:

Developers (or even your future-self) can latch onto your styles' purpose and structure swiftly.
Tasks of implementation and modifications become more relaxed.
Reduces complexity while troubleshooting issues.

Tie CSS code into a linked stylesheet to segregate styles from HTML, promoting a clear separation of content and presentation.

Going the extra mile: Advanced tips

Using template libraries and CSS classes

When your project is powered by a template library and lists are generated programmatically, defining odd and even classes in your CSS file and applying them dynamically to list items can give you more flexibility:

.odd { 
    /* Because being odd is the new cool */
    background: #eee; 
}

.even { 
    /* “Even” I can rock colors! */
    background: #ddd; 
}

Mastering automated style alternation

Championing :nth-child helps in applying varied styles, not just alternating colors. Introduce different borders, font styles, or padding for a rich and aesthetic list appearance.

Dodging inline styles

Refrain from inline styles as they bind content with presentation, turning future changes into a tough task. Besides, inline styles have higher specificity, which may unexpectedly override your CSS file rules.