Kevin Powell - Community•4mo 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

ἔρως•4mo ago

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

ἔρως•4mo ago

and it works

ἔρως•4mo 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)

CrimsonislandOP•4mo ago

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

ἔρως•4mo ago

you're welcome

Gaming

Programming

Nth instance of a has selector