Table Odd Even tr backgroundcolor on specific class

Question

I would like to change the background color of odd tr only of .headcol class.

.headcol is a sticky column on left.

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  font-family: Poppins-Thin, sans-serif;
}

.headcol {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background-color: white;
}

.headcol tr:nth-child(odd) {
  background-color: blue;
}

<table class="table" id="TabListing">
 <thead class="thead-dark">
   <th class="headcol">Nom</th>
   <th>Prénom</th>
 </thead>

<tbody>
 <tr>
  <td class="headcol">BAR</td>
  <td>Mohamed</td>
 </tr>
<tr>
 <td class="headcol">BIAI</td>
 <td>Ikrame</td>
 </tr>

</tbody>
</table>

This code don't give me anything...

If I try :

tr:nth-child(odd) {
  background-color: blue;
}

Odd tr are blue but not .headcol

The problem is that you are looking to style `tr` elements only if they _contain_ an element with the `.headcol` class. This is effectively asking for a "parent selector", and it [doesn't](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) [exist](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). You might need to leverage JS, or consider a different way for structuring/classing this data. — Alexander Nied, May 02 '19 at 16:23
Actually, perhaps I misunderstood your requirements. To clarify-- you need every other instance of a `.headcol` `td` to be blue? Or the whole `tr` that it occupies? — Alexander Nied, May 02 '19 at 18:28

score 0 · Answer 1 · answered May 02 '19 at 16:50

I make correct code for you:

<!DOCTYPE html>
<html>
<head>
<style> 
thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  font-family: Poppins-Thin, sans-serif;
}

.headcol {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background-color: white;
}

tr:nth-child(odd) {
  background-color: blue;
}
</style>
</head>
<body>
<table class="table" id="TabListing">
 <thead class="thead-dark">
   <th class="headcol">Nom</th>
   <th>Prénom</th>
 </thead>

<tbody>
 <tr>
  <td class="headcol">BAR</td>
  <td>Mohamed</td>
 </tr>
 <tbody>
 <tr>
  <td class="headcol">BIAl</td>
  <td>Ikrame</td>
 </tr>

</tbody>
</table>

</body>
</html>

As you can see when you click on Run Code snippet, your answer don't work, I need only odd headcol in blue! — Clément Tengip, May 02 '19 at 18:15

score 0 · Accepted Answer · answered May 02 '19 at 19:30

So you were close. But remember-- the selector item on the left is assumed to contain the selector item to the right (unless some specific operator is placed between them in the selector to change the relationship). So this:

.headcol tr:nth-child(odd) {
  background-color: blue;
}

...was describing every odd tr inside of an element with class .headcol, which is never reflected in your markup. Instead, you want to select any .headcol-classed element inside of an odd-numbered tr, which would be:

tr:nth-child(odd) .headcol {
  background-color: blue;
}

This is what I have done in the below snippet, which appears to match your requirements, if I am understanding them correctly.

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  font-family: Poppins-Thin, sans-serif;
}

.headcol {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background-color: white;
}

tr:nth-child(odd) .headcol {
  background-color: blue;
}

<table class="table" id="TabListing">
    <thead class="thead-dark">
        <th class="headcol">Nom</th>
        <th>Prénom</th>
    </thead>
    <tbody>
        <tr>
            <td class="headcol">BAR</td>
            <td>Mohamed</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Ikrame</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Alex</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Clement</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Rachel</td>
        </tr>
    </tbody>
</table>

I solved the problem by replacing odd by even ! Works very well! thank you again! — Clément Tengip, May 03 '19 at 09:43

Table Odd Even tr backgroundcolor on specific class

2 Answers2