Geek Answers Handbook

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

After Google and stackoverflow-ing , I still could not solve this problem:

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

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

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

So, I can do it in CSS / LESS as follows:

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

This makes the background-color whole line green.

Then I tried to explicitly set the background-color first TD to white, for example:

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

But the whole line remains green background-color , and I'm just wondering what am I doing wrong here?

Here is a quick demo on jsfiddle: http://jsfiddle.net/acegyver/EYVvc/2/

+4
source share
2 answers

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

+3
source

You should move :first-child to your last selector on td .

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

Btw, your selectors are also complex . This is best for performance degradation. If you have only the .rvw-product-total class on <tr> this table, than putting the following selector is enough:

 .rvw-product-total td:first-child {}

I switched the selector and rewrote :first-child than using :last-child because it is better supported . I also included a shorthand property for background instead of background-color .

This should work for you: http://jsfiddle.net/acegyver/EYVvc/2/

+2
source

More articles:


All Articles