Milind Daraniya

Zebra-striping is a popular technique used in web design to improve readability and add a touch of visual appeal to tables, lists, and other elements. Traditionally, zebra-striping alternates the background color of rows to create a pattern resembling a zebra's stripes. In this post, we'll explore how to implement zebra-striping in sets of three and four rows using CSS, creating a unique and eye-catching design for your tabular data!

🎨 Zebra-Striping in Sets of Three:

/* Set default styles for all rows */
tr {
  background-color: #f1f1f1; /* Light gray background */
}

/* Apply zebra-stripe effect to every third row */
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
  background-color: #fff; /* White background for every third row */
}

In this example, we use the :nth-child() pseudo-class to target rows in sets of three. The formula 6n+1, 6n+2, and 6n+3 selects every first, second, and third row in sets of six (three white rows followed by three light gray rows).

🎨 Zebra-Striping in Sets of Four:

/* Set default styles for all rows */
tr {
  background-color: #f1f1f1; /* Light gray background */
}

/* Apply zebra-stripe effect to every fourth row */
tr:nth-child(8n+1),
tr:nth-child(8n+2),
tr:nth-child(8n+3),
tr:nth-child(8n+4) {
  background-color: #fff; /* White background for every fourth row */
}

In this example, we use the same :nth-child() pseudo-class with the formula 8n+1, 8n+2, 8n+3, and 8n+4 to select every first, second, third, and fourth row in sets of eight (four white rows followed by four light gray rows).

🌟 How it Works:

1. We start by setting the default background color for all rows to #f1f1f1 (light gray).
2. The :nth-child() pseudo-class allows us to target specific elements based on their position within a parent element.
3. By using the 6n+1, 6n+2, 6n+3 formula for sets of three and the 8n+1, 8n+2, 8n+3, 8n+4 formula for sets of four, we can easily alternate the background color between white and light gray for the desired rows.

💡 Customize for Your Needs: 
Feel free to adjust the formulas and colors according to your design preferences. For instance, if you want to create zebra-striping in sets of five or six, simply modify the formula accordingly.