Kevin Powell - Community•6mo ago

Nth instance of a has selector

I have a table with a class of table. I also have some table rows (tr) that have a header (th) that has a row span. I am trying to have alternating stripes on the tr’s that have a th child.

<table class="table">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" rowspan="3">Entry1</th>
      <td>Entry1SubEntry11</td>
      <td>Entry1SubEntry12</td>
      <td>Entry1SubEntry13</td>
    </tr>
    <tr>
      <td>Entry1SubEntry21</td>
      <td>Entry1SubEntry22</td>
      <td>Entry1SubEntry23</td>
    </tr>
    <tr>
      <td>Entry1SubEntry31</td>
      <td>Entry1SubEntry32</td>
      <td>Entry1SubEntry33</td>
    </tr>
    <tr>
      <th scope="row" rowspan="3">Entry2</th>
      <td>Entry2SubEntry11</td>
      <td>Entry2SubEntry12</td>
      <td>Entry2SubEntry13</td>
    </tr>
    <tr>
      <td>Entry2SubEntry21</td>
      <td>Entry2SubEntry22</td>
      <td>Entry2SubEntry23</td>
    </tr>
    <tr>
      <td>Entry2SubEntry31</td>
      <td>Entry2SubEntry32</td>
      <td>Entry2SubEntry33</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">Entry3</th>
      <td>Entry3SubEntry11</td>
      <td>Entry3SubEntry12</td>
      <td>Entry3SubEntry13</td>
    </tr>
    <tr>
      <td>Entry3SubEntry21</td>
      <td>Entry3SubEntry22</td>
      <td>Entry3SubEntry23</td>
    </tr>
    <tr>
      <th scope="row" rowspan="1">Entry4</th>
      <td>Entry4SubEntry11</td>
      <td>Entry4SubEntry12</td>
      <td>Entry4SubEntry13</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" rowspan="3">Entry1</th>
      <td>Entry1SubEntry11</td>
      <td>Entry1SubEntry12</td>
      <td>Entry1SubEntry13</td>
    </tr>
    <tr>
      <td>Entry1SubEntry21</td>
      <td>Entry1SubEntry22</td>
      <td>Entry1SubEntry23</td>
    </tr>
    <tr>
      <td>Entry1SubEntry31</td>
      <td>Entry1SubEntry32</td>
      <td>Entry1SubEntry33</td>
    </tr>
    <tr>
      <th scope="row" rowspan="3">Entry2</th>
      <td>Entry2SubEntry11</td>
      <td>Entry2SubEntry12</td>
      <td>Entry2SubEntry13</td>
    </tr>
    <tr>
      <td>Entry2SubEntry21</td>
      <td>Entry2SubEntry22</td>
      <td>Entry2SubEntry23</td>
    </tr>
    <tr>
      <td>Entry2SubEntry31</td>
      <td>Entry2SubEntry32</td>
      <td>Entry2SubEntry33</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">Entry3</th>
      <td>Entry3SubEntry11</td>
      <td>Entry3SubEntry12</td>
      <td>Entry3SubEntry13</td>
    </tr>
    <tr>
      <td>Entry3SubEntry21</td>
      <td>Entry3SubEntry22</td>
      <td>Entry3SubEntry23</td>
    </tr>
    <tr>
      <th scope="row" rowspan="1">Entry4</th>
      <td>Entry4SubEntry11</td>
      <td>Entry4SubEntry12</td>
      <td>Entry4SubEntry13</td>
    </tr>
  </tbody>
</table>

Here is the CSS:

:root {
  --table-stripe-bgcolor: red;
}

.table > tbody > tr:has(th[scope="row"]):nth-of-type(even) {
  background-color: var(--table-stripe-bgcolor);
}

:root {
  --table-stripe-bgcolor: red;
}

.table > tbody > tr:has(th[scope="row"]):nth-of-type(even) {
  background-color: var(--table-stripe-bgcolor);
}