Kevin Powell - Community•2mo 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);
}

Basically, I only want the counter on the rows that have a table header element. Any suggestions?

5 Replies

ἔρως•2mo ago

you were super close tr:nth-child(even of :has(th[scope="row"]))

ἔρως•2mo ago

and it works

ἔρως•2mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#using_of_selector <-- here's more about it the support is pretty scary (2023 for chrome and firefox, 2015 for safari)

Crimsonisland•2mo ago

Thank you for the assist. I’ll be reading up on the of selector now.

ἔρως•2mo ago

you're welcome

Gaming

Programming

Nth instance of a has selector