How to Style Table Rows Differently by CSS nth-child Selector?

Styling alternate HTML table rows differently

You may use the CSS nth-child selector to style alternate table rows differently. Not only may you style alternative rows but also specify a different style for rows with the given number. For example, styling every 3rd or 4th row is different from the other rows.

See the examples below where I will use odd, even, and other numbers in the nth-child selector.

An example of styling alternate rows by odd value

In this example, the odd value is used in the nth-child selector. That means, the first (header), third, and fifth rows will be assigned the style specified in the nth-child selector:

css nth child

HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>

<style>
.nth-table {
    border-collapse: collapse;
    border: 1px solid #824100;
  }
 .nth-table tr:nth-child(odd){
        background: #9DCECE;
        
    }
.nth-table th{
    border: 1px dotted #FFA346;
    color: #3E5260;
    padding:12px;
  }
.nth-table td{
    border: 1px dashed #000;
    color: #002F5E;
    padding:12px;
    width:90px;
  }

    
</style>
</head>
<body>
<table class="nth-table">
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quality</th>
      <th>Product Quantity</th>
  </tr>
  <tr>
      <td>1</td>
      <td>Wheat</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Rice</td>
      <td>Good</td>
      <td>250 Bags</td>
  <tr>
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>  
  <tr>
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>  
  <tr>
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>    


</table>
</body>
</html>     

A demo of using even value in nth-child selector

Only a few changes are made in above CSS along with using the even value in CSS nth-child selector in the tr instead of odd. Have a look at the output:

css nth child even

The CSS:

.nth-table {

    border-collapse: collapse;

    border: 1px solid #400040;

  }

 .nth-table tr:nth-child(even){

        background: #FFB0FF;

 

    }

.nth-table th{

    border: 1px dotted #460046;

    color: #000;

    padding:13px;

    background-color:#AFD8D8;

  }

.nth-table td{

    border: 1px dashed #000;

    color: #002F5E;

    padding:12px;

    width:90px;

  }

You can see, the second row is assigned the style specified in nth-table tr:nth-child(even). Then, the row number fourth, sixth and so on.

A demo of styling every third row differently

As mentioned earlier, you may not only differentiate the alternate rows by using odd or even but also may specify a number to differentiate each 2nd, 3rd, 4th and so on rows.

For that, simply use the number in nth-child, for example,

nth-table-number tr:nth-child(3n)

css nth child third

The CSS used for this demo:

nth-table-number {

    border-collapse: collapse;

    border: 1px solid #400040;

  }

 .nth-table-number tr:nth-child(3n){

        background: #DEF3CA;

    }

.nth-table-number th{

    border: 1px dotted #460046;

    color: #000;

    padding:13px;

    background-color:#86C442;

    border-radius:5px;

  }

.nth-table-number td{

    border: 1px dashed #000;

    color: #002F5E;

    padding:12px;

    width:90px;

    border-radius:50%;

    text-align: center;

  }

You can see, every third row is assigned a different style. Get the complete code from the demo page.

A demo of start styling after certain rows

You may need to show differently styled rows in an HTML table after a certain number of rows. For example, showing first five rows in the same style and after that each odd or even row showing differently. You may use nth-child in an advanced way as follows to achieve that.

See this demo where I started styling odd rows differently after first four rows (the row count includes the table header that you may style differently).

css table nth child

This is how the nth-child selector is used:

tr:nth-child(n+4):nth-child(odd)

 

Similarly, you may use the nth-child selector in <td> or other elements for styling differently.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️