Search code examples
csscss-tables

CSS3 Alternate table background color based on table row class


There should be a good way to alternate table row background colors based on class. Currently, I'm just doing something like this:

/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }

I would think there's a way to do something like:

table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }

Unfortunately, I'm not sure how to include all tr classes for the table and go even/odd based on that.

Suggestions?

Edit: Adding snipped/edited page code

table#table_organization tr.unsure,
tr.dept,
tr.org {
  background-color: honeydew;
}

table#table_organization tr.board,
tr.prog,
tr.ssa {
  background-color: white;
}
<section>
  <h1> Organization </h1>
  <table id="table_organization" class="sortable">
    <tr>
      <th> Dept. </th>
    </tr>
    <tr class="unsure">
      <td> - </td>
    </tr>
    <tr class="board">
      <td> Board </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
  </table>
</section>


Solution

  • Unfortunately CSS does not have a :nth-of-class pseudo selector. As long as the number of rows is very limited, using the adjacent sibling selector + could help (showing only for .dept):

    .dept {
      background: yellow;
    }
    
    .dept+.dept {
      background-color: orange;
    }
    
    .dept+.dept+.dept {
      background-color: red;
    }
    <table id="table_organization" class="sortable">
      <tr>
        <th> Dept. </th>
      </tr>
      <tr class="dept">
        <td> Department </td>
      </tr>
      <tr class="dept">
        <td> Department </td>
      </tr>
      <tr class="dept">
        <td> Department </td>
      </tr>
    </table>