Skip to content
Related Articles

Related Articles

Improve Article
How to set alternate table row color using CSS?
  • Last Updated : 19 Feb, 2019

The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth child.

Syntax:

:nth-child(number) {
    // CSS Property
}

Where number is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.

  • odd: It represents the elements whose position is odd in a series: 1, 3, 5, etc.

    Syntax:

    element:nth-child(even)
  • even: It represents the elements whose position is even in a series: 2, 4, 6, etc.

    Syntax:



    element:nth-child(odd)

Example 1: It sets the color to alternate even rows in a table.




<!DOCTYPE html>
<html>
      
<head>
      
    <!-- CSS style to set alternate table 
            row using color -->
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
          
        th, td {
            text-align: left;
            padding: 8px;
        }
          
        tr:nth-child(even) {
            background-color: Lightgreen;
        }
    </style>
</head>
  
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Salary</th>
        </tr>
          
        <tr>
            <td>Steve</td>
            <td>Manager</td>
            <td>1,00,000</td>
        </tr>
          
        <tr>
            <td>SURAJ</td>
            <td>Assistant Manager</td>
            <td>50,000</td>
        </tr>
          
        <tr>
            <td>Khushboo</td>
            <td>Analysist</td>
            <td>65,000</td>
        </tr>
          
        <tr>
            <td>Kartik</td>
            <td>Worker</td>
            <td>20,000</td>
        </tr>
          
        <tr>
            <td>Saksham</td>
            <td>Worker</td>
            <td>20,000</td>
        </tr>
    </table>
</body>
  
</html>

Output:

Example 2: It sets the color to alternate odd rows in a table.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        Set alternate row in table
    </title>
      
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
          
        th, td {
            text-align: left;
            padding: 8px;
        }
          
        tr:nth-child(odd) {
            background-color: Lightgreen;
        }
    </style>
</head>
  
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Salary</th>
        </tr>
          
        <tr>
            <td>Steve</td>
            <td>Manager</td>
            <td>1, 00, 000</td>
        </tr>
          
        <tr>
            <td>SURAJ</td>
            <td>Assistant Manager</td>
            <td>50, 000</td>
        </tr>
          
        <tr>
            <td>Khushboo</td>
            <td>Analysist</td>
            <td>65, 000</td>
        </tr>
          
        <tr>
            <td>Kartik</td>
            <td>Worker</td>
            <td>20, 000</td>
        </tr>
          
        <tr>
            <td>Saksham</td>
            <td>Worker</td>
            <td>20, 000</td>
        </tr>
    </table>
</body>    
  
<html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :