My Books

Text Processing with JavaScript

Solve complex text validation, extraction, and modification problems efficiently in JavaScript.

Modern Async JavaScript

Delve into async features of JavaScript from ES2020 through ESNext. Start building custom asynchronous iterators and generators, and more for fast, lean code.

JavaScript Brain Teasers

Ready to test your JavaScript skills? Challenge yourself with these brain-teasing puzzles, supercharge your learning journey, and emerge as a JavaScript pro.

Coding

CSS – Odd Even Rows

Faraz

In this tutorial, I will explain how you can style odd/even rows without the need of any extra CSS class or JavaScript code.

By using CSS we can style odd/even rows without the need of any extra CSS class, JavaScript, or server-side code. :nth-child() is a CSS3 pseudo-class that helps us to do so and it is supported by almost all modern browsers.

For example:

li:nth-child(2n+0) {background:grey} /* selects every even row of a list */
li:nth-child(even) {background:grey} /* same as above */ 

li:nth-child(2n+1) {background:white} /* selects every odd row of a list */ 
li:nth-child(odd) {background:white} /* same as above */

1 comment

  1. Pingback: Odd Even Table in CSS

Have your say