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

Question

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 trs. 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?

Answer 1

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>