I've got a table that is generated from another application/service that I am not able to modify the layout of. I would like to have CSS where the first row has a style, and then the other rows have alternating styles. The major issue is that there are no differences in the html concerning the header and other rows.
<table id="t01">
<tr>
<td>Firstname</th>
<td>Lastname</th>
<td>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
I've seen things in CSS like table > tr:n-child(odd) but those don't work. Is there a way for me to say "tr:nth-child(ODD EXCEPT WHEN = 1)" ?
Any help is greatly appreciated. Here is a snapshot of what I'm trying to accomplish.

EDIT: SOLUTION
This was the solution I settled on. The key was to put the first-child selector after the nth-child(2n + 1) selector so the header style would override the iterative style. I might look into the :not selector, but I wanted to get rolling again.
div#tablewrappingdiv> table > tbody tr:nth-child(2n+1) > td{
background-color: #eee;
}
div#tablewrappingdiv> table > tbody > tr:first-child > td{
background-color: #006c00;
}
div#tablewrappingdiv> table > tbody > tr:nth-child(2n + 2) > td{
background-color: #d8e4bc;
}
Take a look at the Selector Reference for nth-child:
tr:first-child {darkgreen} (nth-child(0) would also work)
tr:nth-child(2n+2) {white}
tr:nth-child(2n+3) {lightgreen}
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
See it in action here: https://jsfiddle.net/z8xhs0h1/
For this rather simple case (even/odd, first different), take a look at this answer. It is slightly easier to read and says that you just have to put the first-child rule last:
tr:nth-child(even) {white}
tr:nth-child(odd) {lightgreen}
tr:first-child {darkgreen} (overrides white color)
Still, for more complicated cases or in case you want to be very explicit, the an+b rules can be quite flexible.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With