Kevin Powell - Community•3mo ago

table tr:nth-child(odd) pseudo class not targetting only odd instances of particular tr element

Hello guys, sorry to disturb you... I was trying to use the nth-child() pseudo class to make odd numbered of rows have a different font-color but row 1 is being changed to the different color which is correct but row 2 is also being changed to a different color, can someone explain why please

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Refreshing some concepts</title>
    <style>
      table tr:nth-child(odd) {
        color: dodgerblue;
      }
    </style>
  </head>
  <body>
    <table border="2">
      <thead>
        <tr>
          <td>Company</td>
          <td>Contact</td>
          <td>Country</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Refreshing some concepts</title>
    <style>
      table tr:nth-child(odd) {
        color: dodgerblue;
      }
    </style>
  </head>
  <body>
    <table border="2">
      <thead>
        <tr>
          <td>Company</td>
          <td>Contact</td>
          <td>Country</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

6 Replies

Jochem•3mo ago

by row 1 you mean the header, and by row 2 you mean the first row with "Germany" in it? nth-child will look at elements and which child they are relative to their direct parent, so the thead will have a first-child (or nth-child(1)), and then the tbody will have one as well. I'd recommend changing your selector to tbody tr:nth-child(odd) and then setting the background on the thead as you want manually. Alternatively, change it to even and flip the colors around

FakerOP•3mo ago

when you say direct parent, here the direct parent of nth-child is tr or table please

Jochem•3mo ago

you're selecting a tr which is a child of either thead or tbody in your code the tr is the child, the thead/tbody are the parent

FakerOP•3mo ago

ah I see, is it correct to say the following: The purpose of the tr:nth-child(odd) is to select the table rows which are odd specific to a particular element/tag. That is for eg, we have a parent thead element which contains tr as child. In this element, we want to look for odd rows. Now we encounter another parent element of a tr element, the tbody element, here we start counting from over again, starting from 1 for the first tr element.

Jochem•3mo ago

yes, that's correct nth-child looks only at elements inside each new parent element

FakerOP•3mo ago

yep I see, the miss-conception was that I didn't know that each time nth-child encounters a new parent element, the "count" is reset, like for me, thead = first row, now in tbody, second row and so on

Gaming

Programming

table tr:nth-child(odd) pseudo class not targetting only odd instances of particular tr element