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>

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?

• javascript
• html
• css

• 1 @Paulie_D This is clearly not a duplicate. Please retract your close vote. The other question does not address the nesting of children under parents. Something I have clearly explained in my question. Please consider reading the entire question before casting a close vote. Close votes are sometimes cast because there is an existing one, which leads to valid questions being wrongly closed. – Jumbalaya Wanton Commented Feb 24, 2015 at 15:43
• I guess JS will be less tricky and can give you a faster solution – DaniP Commented Feb 24, 2015 at 15:45
• 1 I've removed the close vote although it remains my opinion that it is in fact a duplicate since the solution requires a re-structuring of the HTML. – Paulie_D Commented Feb 24, 2015 at 15:51
• Is there a limit to how many children there will be? I could do it with CSS (sorta hackishly) if there's ever a limited number of children. – Chad Commented Feb 24, 2015 at 15:55
• @Chad no, but it is certain to always be in the 10s. – Jumbalaya Wanton Commented Feb 24, 2015 at 16:18

3 Answers 3

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>

why not do some javascript?

var RowNumber = 0,

for(i = Rownumber + 1; i<=x*;i++) {
If (RowNumber % === 0) {
 this.setAttribute('class', 'even');
} else {
 this.setAttribute('class', 'odd');
}
});

create the even class and odd class and give each tr an id

*This is a note: Set x to equal the amount of rows in your table.

OR do a switch statement, I prefer a good ol' if statement but Switch could work just as well :)

Check this solution: http://fiddle.jshell/manzapanza/6vjLm0td/

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

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

.parentOdd {
  background-color: #eb94fa;
}
.parentOdd.child:nth-child(odd) {
  background-color: #F2C9F9;
}
.parentOdd.child:nth-child(even) {
  background-color: #F9E1DC;
}
.parentEven {
  background-color: #c294fa;
}
.parentEven.child:nth-child(odd) {
  background-color: #E1CCFC;
}
.parentEven.child:nth-child(even) {
  background-color: #EEE5FA;
}

<table>
  <tbody>
    <tr class="parentOdd">
      <td>Parent A</td>
    </tr>
    <tr class="parentOdd child">
      <td>A1</td>
    </tr>
    <tr class="parentOdd child">
      <td>A2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent B</td>
    </tr>
    <tr class="parentOdd">
      <td>Parent C</td>
    </tr>
    <tr class="parentOdd child">
      <td>C1</td>
    </tr>
    <tr class="parentOdd child">
      <td>C2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent D</td>
    </tr>
    <tr class="parentEven child">
      <td>D1</td>
    </tr>
    <tr class="parentEven child">
      <td>D2</td>
    </tr>
  </tbody>
</table>