Set alternate table row background color using CSS

The :nth-child() CSS pseudo-class matches the elements based on their position in a group of siblings. The :nth-child() selector used to set the alternate table row color using CSS.

Below are the example of odd rows of an HTML table and even rows of an HTML (Even and odd rules) CSS table with alternating color rows

  1. odd: It represents the elements whose position is odd in a series: 1, 3, 5, etc.
  2. even: It represents the elements whose position is even in a series: 2, 4, 6, etc.
div#test > *:nth-child(3n+1) {
	color: #CB000F;

div#test div:nth-of-type(5n+2) {
	background-color: #9999ff;

To matches all the even rows of the table and all the odd rows of the table use :nth-child() selector to set alternate table row color using CSS. Set alternate table row background color for improve the readability of large tables. It’s easily separation way of row using background color use of element:nth-child(even) and element:nth-child(odd) selector. CSS even and odd rules matches the exactly those elements in tables and lists which want to apply some CSS for differentiation to each row and lists and give the more styles to the tables using CSS. To add style to specific rows, columns, lists groups use the :nth-child() selector in your CSS. See the examples above where use of odd, even and other numbers in the nth-child selector.

<!doctype html>
<html class="no-js" lang="en">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience and security.</p>
<div class="container">
<div class="row">
<div class="col-sm-12">

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

How to style table rows differently by CSS nth-child selector?

You can customize this code further as per your requirement.