CSS in tab - last TR TD

Question

<table id="tab">

<tr> <td>11</td> <td>22</td> </tr>

<tr> <td>33</td> <td>44</td> </tr>

<tr> <td>55</td> <td>66</td> </tr>

</table>

#tab td {
border: solid 2px red;
padding: 10px;
}

#tab td {
background-color: green;
}

I would like that only in last TR TD was GREEN - 55 and 66 . TD with 11, 22, 33, 44 must be white.

I generate this table with PHP - I must use only CSS or jQuery.

#tab td:last {
background-color: green;
}

doesn't work.

LIVE: http://jsfiddle.net/Rx2De/

Answer 1

The standard-compliant solution for that is:

#tab tr:last-child td {
    background-color: green;
}

However it isn't supported in IE6-8. Fot them you can use jQuery snippet:

$(function(){
    $('#tab tr:last td').css('background', 'green');
});   

Answer 2

I believe you want to use the :last-child pseudo class. And you would want to apply that on the tr not the td.

#tab tr:last-child {
  background-color: green;
}

here is a fiddle http://jsfiddle.net/Rx2De/1/

Answer 3

write like this

#tab tr:last-child td {
background-color: green;
}

but is not work in IE

or you write like this:

#tab tr + tr + tr td {
    background-color: green;
    }

check this http://jsfiddle.net/sandeep/Rx2De/7/

it's work on IE also