Open In App
Related Articles

How to set alternate table row color using CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.  

html

<!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. 

html

<!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:  

Supported Browser:

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Opera 9.6
  • Safari 3.2
     

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 30 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads