html tutorial - How to highlight the background of alternate table row using CSS - html5 - html code - html form



Answer: Use the CSS ":nth-child" selector

    This shows how to focus on the background of alternate table row using the CSS3 :nth-child selector. The :nth-child(N) pseudo-class accepts an argument N, which can be a keyword, a number, or a number expression of the shapxn+y wherex and y are integers (e.g. 1n, 2n, 3n, 2n+1, 3n-2, …).

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Highlighting Alternate Table Row</title>
      <style type="text/css">
          table{
              margin: 30px;
              border-collapse: collapse;
          }
          table tr{
              border-bottom: 1px solid #666;
          }
          table tr:nth-child(2n){
              background: #f2f2f2;
          }
          table th, table td{
              padding: 10px;
          }
      </style>
      </head>
      <body>
          <table>
              <tr>
                  <th>Row</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
              </tr>
              <tr>
                  <td>1</td>
                  <td>John</td>
                  <td>Carter</td>
                  <td>johncarter@mail.com</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>Peter</td>
                  <td>Parker</td>
                  <td>peterparker@mail.com</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>william</td>
                  <td>smith</td>
                  <td>williamsmith@mail.com</td>
              </tr>
              <tr>
                  <td>4</td>
                  <td>robert</td>
                  <td>edwin</td>
                  <td>robertedwin@mail.com</td>
              </tr>
          </table>
      </body>
      </html>

      Related Searches to How to highlight the background of alternate table row using CSS