Last TD and Second last TD in TR (CSS / LESS)

Question

After Google-ing and stackoverflow-ing, I still haven't been able to solve this one:

I have a table with about a dozen rows. One of the rows looks like this:

<tr class="rvw-product-total">
    <td colspan="2"></td>
    <td>Total:</td>
    <td>$180.67</td>
</tr>

The last two TDs in this row (Total and $180.67) should have a green background-color and bold text.

So I can get this accomplished in CSS/LESS like so:

tr[class="rvw-product-total"]:last-child td, tr[class="rvw-product-total"]:nth-child(n+2) td {
    font-weight: bold;
    background-color: #DFF0D8;
}

That makes the background-color of the entire row green.

Then I've tried explicitly setting the background-color of the first TD to white, like so:

tr[class="rvw-product-total"]:first-child td {
    background-color: #fff;
}

But the entire row still remains the green background-color, and I'm just curious what I'm doing wrong here?

Here's a quick demonstration on jsfiddle: http://jsfiddle.net/acegyver/EYVvc/2/

Answer 1

The first selector should be:

table.prod-rvw-tbl tr[class="rvw-product-total"] td:last-child,

And the second selector should be:

table.prod-rvw-tbl tr[class="rvw-product-total"] td:nth-child(n + 2)

Fiddle