Le sélecteur CSS recherche un sous-ensemble d'entités basé sur le filtre de classe

Question

J'ai un tableau qui contient un ensemble de lignes représentées, et au sein de cet ensemble de tableaux, certaines lignes ont une catégorie « cliquable ». Ce que j'essaie de faire, c'est d'appliquer un style à chaque ligne impaire comportant une catégorie "cliquable". J'ai essayé différents sélecteurs, mais il semble uniquement appliquer le style aux lignes impaires cliquables, qui sont étranges lorsqu'elles sont appliquées à toutes les lignes du tableau, pas seulement à celles avec la classe "cliquable". Je pense que j'ai besoin du sélecteur pour trouver un sous-ensemble de lignes qui ont la classe "cliquable", puis parcourir ces lignes pour le nombre impair d'enfants.

Si les lignes 1, 4, 5, 7 et 8 sont cliquables, alors je veux que les lignes 4 et 7 soient considérées comme les lignes impaires ici. Cependant, il semble regarder 1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 et lors de la recherche de lignes impaires avec cliquable ( En utilisant c comme référence) Seuls 4, 8 sont sélectionnés car ils se trouvent à des positions impaires dans l'ensemble des lignes.

J'ai essayé beaucoup de sélecteurs mais sans succès. J'espère que c'est un scénario possible et que quelqu'un pourra m'aider avec des commentaires ou une solution si 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

C'est ce que vous recherchez :

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

La source de la réponse vient de ici

Ou utilisez java script/jquery pour une large prise en charge du navigateur :

$('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>