Alternating Table Row Color With The First Row A Different Color

I want to make a table where the header is green and then the rows alternate between different styles. How can I style the first row's color as well as having the others alternate?

Solution 1:

You just have to place the first-child rule after the rest, so it overrides them.

.butikHeadertr:nth-child(even) {
    background:#FFF;
    border:0px;
    color:#000;
}
.butikHeadertr:nth-child(odd) {
    background:#DFE7C0;
}
.butikHeadertr:first-child {
    background:#8AB512;
    color:#FFF;
}

Solution 2:

Use thead and tbody

theadtr {
  background:#8AB512;
    color:#FFF;
}

tbodytr:nth-child(even) {
    background:#FFF;
    border:0px;
    color:#000;
}

tbodytr:nth-child(odd) {
    background:#DFE7C0;
}

<table><thead><tr><th>Month</th><th>Savings</th></tr></thead><tbody><tr><td>Sum</td><td>$180</td></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table>

Solution 3:

Errrm your code all works. I'd guess something that's not in your sample code is affecting it.

Try adding !important after each css statement eg:

.butikHeadertr:nth-child(odd) {
    background:#DFE7C0!important;
}

To test the theory. I'm not a fan of using !important generally by the way, but that's another story.

Also I would suggest you split your top row into a thead element and subsequent ones into a tbody statement, but I guess again, that's another story.