How can I color odd-numbered table rows starting after each row with a particular class?

Question

I have sections in my table, so there are section-header rows and regular-rows. How can I color one in two rows, so that the next row after the section-header is always colored, like in the following snippet. I'm trying using a combination of + and :nth-child, but I can't make it work.

table {
border-collapse: collapse;
}

.want {
  background-color: aquamarine;
}

<table>
  <tr class="table-header"><th>Blah</th><th>Blablablah</th></tr>
  <tr class="section-header"><th colspan="2">Section A</th></tr>
  <tr class="regular-row want"><td>A1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>A2</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>A3</td><td>Blah</td></tr>
  <tr class="regular-row"><td>A4</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>A5</td><td>Blah</td></tr>
  <tr class="section-header"><th colspan="2">Section B</th></tr>
  <tr class="regular-row want"><td>B1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>B2</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>B3</td><td>Blah</td></tr>
  <tr class="regular-row"><td>B4</td><td>Blah</td></tr>
  <tr class="section-header"><th colspan="2">Section C</th></tr>
  <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
  <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  <tr class="section-header"><th colspan="2">Section D</th></tr>
  <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
</table>

`.section-header + .regular-row` this targets the regular row after section header regardless of how many regular rows there are between each section header — Huangism, Jan 27 '23 at 19:31
Have you even checked how nth-child works? It's just nth-child(2n) or nth-child(2n-1) that you need — nicael, Jan 27 '23 at 19:31
Does this answer your question? [What does the "+" (plus sign) CSS selector mean?](https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean) — Huangism, Jan 27 '23 at 19:33
@nicael, no it isn't. I suggest that you copy the snippet down and demonstrate your solution. — isherwood, Jan 27 '23 at 19:34
@Huangusm Ok it colors the first regular row after each section-header. I want all the regular-row to be colored, one out of two, starting with the first one after each section-header. Like in my snippet. — Gaetan L., Jan 27 '23 at 19:37
@isherwood yeah I can do that, I was curious to know if there was some kind of css attribute I could give to section-header that would "reset" the nth-child count, Idk really what I was thinking ^^ But yeah I think I'll use tbody you're right. — Gaetan L., Jan 27 '23 at 19:39
Might be possible with [counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters), but my Friday brain isn't making it happen. — isherwood, Jan 27 '23 at 19:42
Mine must be tired too, thinking this might have been easier than nesting elements properly... — Gaetan L., Jan 27 '23 at 19:53

score 0 · Accepted Answer · answered Jan 27 '23 at 19:40

I suggest either nested tables or a series of tbody elements. Either would make this simple.

table {
border-collapse: collapse;
}

tbody > tr:nth-child(even) {
  background-color: aquamarine;
}

<table>
  <thead>
    <tr class="table-header"><th>Blah</th><th>Blablablah</th></tr>
  </thead>
  <tbody>
    <tr class="section-header"><th colspan="2">Section A</th></tr>
    <tr class="regular-row want"><td>A1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>A2</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>A3</td><td>Blah</td></tr>
    <tr class="regular-row"><td>A4</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>A5</td><td>Blah</td></tr>
  </tbody>
  <tbody>
    <tr class="section-header"><th colspan="2">Section B</th></tr>
    <tr class="regular-row want"><td>B1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>B2</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>B3</td><td>Blah</td></tr>
    <tr class="regular-row"><td>B4</td><td>Blah</td></tr>
  </tbody>
  <tbody>
    <tr class="section-header"><th colspan="2">Section C</th></tr>
    <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
    <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
  </tbody>
  <tbody>
    <tr class="section-header"><th colspan="2">Section D</th></tr>
    <tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
    <tr class="regular-row"><td>C1</td><td>Blah</td></tr>
  </tbody>
</table>

How can I color odd-numbered table rows starting after each row with a particular class?

1 Answers1