Highlight a row on Click not working. CSS precedence - html

Question

Here's the table in my html file. I have to highlight a row on click.
<tbody>
<!--display none-->
<!--onclick-->
<tr ng-repeat="case in lastten" ng-click="setSelected(case.Name)" ng-class="{selected: case.Name === idSelected}">
<td colspan="1">{{case.Name}}</td>
<td colspan="1">{{case.total}}</td>
<td colspan="1">{{case.passed}}</td>
<td colspan="1">{{case.failed}}</td>
</tr>
</tbody>
css- initialTable is the class for the above table
table.InitialTable {
table-layout: fixed;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
margin-top: 20px;
margin-bottom: 20px;
border-collapse: collapse;
border-spacing: 0;
}
table.InitialTable td,
th {
border: 1px solid transparent;
height: 40px;
transition: all 0.3s;
overflow: hidden;
}
table.InitialTable th {
font-weight: bold;
text-align: center;
vertical-align: middle;
}
table.InitialTable td {
text-align: center;
vertical-align: middle;
}
table.InitialTable tr:nth-child(even) {
background: #f3f7fb;
}
table.InitialTable tr:nth-child(odd) {
background: #ffffff;
}
.InitialTable tr:hover td {
background: #eee;
}
.selected {
background: red;
}
Here's the angular code-
$scope.idSelected = null;
$scope.setSelected = function(idSelected) {
$scope.idSelected = idSelected;
};
So basically whenever a row is selected it gets the class selected and it should be highlighted. But the css is not working. So is the precedence of .selected below the hover ? I also tried a lot of other combinations , but it didn't work. Even important isn't working . I've been stuck at this for quite a while now .