How to use pseudo class nt-child for column colors?-CodePudding

For a school project I need to create a website. I have table with data in it it has 5 columns and 20 rows. I need to use the pseudo class nth-child to color all even horizontal lines #CFF and all the odd horizontal lines #FFF. Can anyone help me? I tried to use it a couple of times but wouldn't work.

If this works, my assignment is done

.table-pricing {
  float: left;
  width: 70%;
  border-width: 1px;
  border-style: double;
  border-color: #279AF1;
}

tr:nth-child(2) {
  background-color: #CFF;
}

<table >
  <thead>
    <tr>
      <td><strong>Product Name</strong></td>
      <th>Description</th>
      <th>Price</th>
      <th>Shoe Type</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tr>
    <td>All shoe</td>
    <td>For everyone</td>
    <td>150</td>
    <td>Soft shoe</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Yellow shoe</td>
    <td>Best shoe for budget</td>
    <td>49</td>
    <td>hard shoe</td>
    <td>7</td>
    <tr>
    </tr>
    <td>Red shoe</td>
    <td>For pros</td>
    <td>169</td>
    <td>hard shoe</td>
    <td>8.5</td>
    <tr>
    </tr>
    <td>Orange shoe</td>
    <td>Best shoe for budget</td>
    <td>79</td>
    <td> exterme hard shoe</td>
    <td>6</td>
    <tr>
    </tr>
    <td>Pink shoe</td>
    <td>For everyone</td>
    <td>45</td>
    <td>hard shoe</td>
    <td>6</td>
    <tr>
    </tr>
    <tr>
      <td>Grey shoe</td>
      <td>For everyone</td>
      <td>139</td>
      <td>soft shoe</td>
      <td>9.3</td>
      <tr>
      </tr>
      <tr>
        <td>Black shoe</td>
        <td>For everyone</td>
        <td>45</td>
        <td>very soft shoe</td>
        <td>6</td>
        <tr>
        </tr>
        <tr>
          <td>Aqua shoe</td>
          <td>For the family</td>
          <td>75</td>
          <td>very soft shoe</td>
          <td>7</td>
          <tr>
          </tr>
          <tr>
            <td>Indigo shoe</td>
            <td>For beginners</td>
            <td>145</td>
            <td>very soft shoe</td>
            <td>6</td>
            <tr>
            </tr>
            <tr>
              <td>All shoe2</td>
              <td>For everyone</td>
              <td>69</td>
              <td>Soft shoe</td>
              <td>8</td>
              <tr>
              </tr>
              <td>Green shoe</td>
              <td>Best shoe for budget</td>
              <td>49</td>
              <td>hard shoe</td>
              <td>9</td>
              <tr>
              </tr>
              <td>Fire shoe</td>
              <td>For pros</td>
              <td>67</td>
              <td>hard shoe</td>
              <td>8.5</td>
              <tr>
              </tr>
              <td>Brown shoe</td>
              <td>Best shoe for budget</td>
              <td>34</td>
              <td> exterme hard shoe</td>
              <td>6</td>
              <tr>
              </tr>
              <td>Pro shoe</td>
              <td>For everyone</td>
              <td>98</td>
              <td>hard shoe</td>
              <td>5</td>
            </tr>
            <tr>
              <td>Ultra shoe</td>
              <td>For everyone</td>
              <td>234</td>
              <td>soft shoe</td>
              <td>9.3</td>
            </tr>
            <tr>
              <td>Nike shoe</td>
              <td>For everyone</td>
              <td>54</td>
              <td>very soft shoe</td>
              <td>8</td>
            </tr>
            <tr>
              <td>Adidas shoe</td>
              <td>For the family</td>
              <td>78</td>
              <td>very soft shoe</td>
              <td>4</td>
            </tr>
            <tr>
              <td>Puma shoe</td>
              <td>For beginners</td>
              <td>98</td>
              <td>very soft shoe</td>
              <td>6</td>
            </tr>
</table>

CodePudding user response：

Use tr:nth-child(2n) to select every second row

tr:nth-child(2n) {
  background-color: #cff;
}

<table>
  <tr>
    <td>Row</td>
  </tr>
  <tr>
    <td>Row</td>
  </tr>
  <tr>
    <td>Row</td>
  </tr>
  <tr>
    <td>Your</td>
  </tr>
  <tr>
    <td>Boat</td>
  </tr>
</table>

CodePudding user response：

I hope this will help you try this:

 tr:nth-child(2n) {
  background-color: #cff;
}