CSS selector finds subset of entities based on class filter

Question

I have a table that contains a set of rows represented, and within that set of tables, some rows have a "clickable" category. What I'm trying to do is apply a style to every odd row that has a "clickable" category. I've tried various selectors, but it only seems to apply the style to clickable odd rows, which are odd when applied to all table rows, not just those with the "clickable" class. I think I need the selector to find a subset of rows that have the "clickable" class and then iterate over those rows for the odd number of children.

If rows 1, 4, 5, 7 and 8 are clickable, then I want rows 4 and 7 to be considered the odd rows here. However, it seems to look at 1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 and when looking for odd rows with clickable (Using c as reference) Only 4, 8 are selected since they are at odd positions in the entire set of rows.

I tried a lot of selectors but no luck. I'm hoping this is a possible scenario and someone can help me with some feedback or a solution if possible.

td {
  border-bottom: 1px solid #cdcdcd;
  width: 100px;
}

.clickable {
  font-weight: 600;
  font-size: 16px;
}

.clickable:nth-child(odd) {
  background-color: lightcoral;
}

<table>
  <tr class="table-row clickable">
    <td>Dean</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Fred</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sam</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Gina</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sam</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Alex</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Eli</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Emma</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>John</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sophie</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sarah</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>

</table>

Answer 1

This is what you are looking for:

tr:nth-child(even of .clickable) {
    background-color: lightcoral;
}

The answer source comes from here

Or use java script/jquery for broad browser support:

$('tr.clickable').each(function(index, value) {
  if(index % 2 != 0)
  $(value).addClass('custom-bg');
});

td {
  border-bottom: 1px solid #cdcdcd;
  width: 100px;
}

.clickable {
  font-weight: 600;
  font-size: 16px;
}

.clickable.custom-bg {
  background-color: lightcoral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="table-row clickable">
    <td>Dean</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Fred</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sam</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row">
    <td>Gina</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sam</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Alex</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Eli</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Emma</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>John</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sophie</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sarah</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>

</table>