Ignore table css class when row is clicked (Chrome) - css

Question

I'm using Twitter Bootstrap css for the table so the row background changes when hovered over
<table id="tableAppList" class="table table-condensed table-hover">
</table>
css:
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
When the row is clicked I add the "rowSelected" class to change the background colour
Typescript:
$("#tableAppList tr").on("click", (e: JQueryEventObject) => {
e.preventDefault();
var appName = $(e.currentTarget).find("td").eq(0).find("label").text();
this.selectedAppRowId = $(e.currentTarget).attr("id");
$(e.currentTarget).addClass("rowSelected");
this.getAppUsers(appName);
});
As expected the row loses it's "selected" background color when hovered over because of the table css.
So is there a way to override or ignore the table css class for the selected row?
Have tried this so far but doesn't work:
.rowSelected
{
background-color: #606060;
color: #FFFFFF;
}
.rowSelectedOverrideHover tr:hover > td
{
background-color: #606060;
}
Perhaps the only alternative is to not use the table-hover css class and instead add a class to the row when hovered using jQuery (a bit inefficient) which I can opt to ignore if it is selected.
Any other ideas out there?

Answer 1

Make sure your rule for your selected background uses a selector with a higher specificity than the selector for the hover. For example, this
tbody tr.rowSelected > td,
tbody tr.rowSelected > th {
background-color: #606060;
}
has same specificity, so if you put it after the rule for the hover it will override it in all cases.