Alternating row colours with nth-child and nth-of-type

css, html, javascript

Solution

Is there any reason not to use multiple `<tbody>`s? Grouping rows can make it easy.

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #eee;
  padding: 10px;
}

tbody:nth-child(odd) > tr { /* odd child */
  background-color: #f2c4fa;
}

tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */
  background-color: #eb94fa;
}

tbody:nth-child(even) > tr { /* even child */
  background-color: #d8bbfd;
}

tbody:nth-child(even) > tr:nth-child(1) { /* even parent */
  background-color: #c294fa;
}

<table>
  <tbody>
    <tr>
      <td>Parent A</td>
    </tr>
    <tr>
      <td>A1</td>
    </tr>
    <tr>
      <td>A2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Parent B</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Parent C</td>
    </tr>
    <tr>
      <td>C1</td>
    </tr>
    <tr>
      <td>C2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Parent D</td>
    </tr>
    <tr>
      <td>D1</td>
    </tr>
    <tr>
      <td>D2</td>
    </tr>
  </tbody>
</table>

Problem

Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question. I have a table where rows can have one of two classes: `parent` or `child`. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are `tr`s. Example: ``` Parent A Child 1 Child 2 Parent B Parent C Child 1 ``` I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color. Please see the included snippet for an example of what I'm trying to achieve. ``` table { border-collapse: collapse; width: 100%; } td { border: 1px solid #eee; padding: 10px; } .parentOdd { background-color: #eb94fa; } .parentEven { background-color: #c294fa; } .oddChild { background-color: #f2c4fa; } .evenChild { background-color: #d8bbfd; } ``` ``` <table> <tbody> <tr class="parentOdd"> <td>Parent A</td> </tr> <tr class="oddChild"> <td>A1</td> </tr> <tr class="oddChild"> <td>A2</td> </tr> <tr class="parentEven"> <td>Parent B</td> </tr> <tr class="parentOdd"> <td>Parent C</td> </tr> <tr class="oddChild"> <td>C1</td> </tr> <tr class="oddChild"> <td>C2</td> </tr> <tr class="parentEven"> <td>Parent D</td> </tr> <tr class="evenChild"> <td>D1</td> </tr> <tr class="evenChild"> <td>D2</td> </tr> </tbody> </table> ``` I tried using CSS pseudo-selectors, but no luck. ``` .parent:nth-child(odd) { background-color: green; } .parent:nth-child(even) { background-color: blue; } ``` The `nth-child` selector ignores the class. I tried using `nth-of-type` but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children. Is what I'm trying to do possible in CSS? Or do I have to resort to JavaScript?

Original source

Related problems