How to disable on hover effects on last table row?

Question

I'm using simple html table with following css which will simply change background color on mouse hover.

    html>body tbody.scrollableBody tr:hover>td{
    background-color: #ccc
}

I need to take this effect to every table row except to the last table row. Is there anyway me to handle this exception with css or js ?

Thank you

Answer 1

Use this rule just after your above rule.

html>body tbody.scrollableBody tr:last-child:hover>td{
    background-color: #FFF 
}

#FFF will be whatever the background color is by default