Question

In the following example

http://jsfiddle.net/xBRPg/

I’m trying to create a yellow background for one of my table rows. The following line of code

<table class="table table-bordered table-striped">

Seems to supersede my own styling. If I remove the classes the row appears yellow as desired. Is there some way to maintain the classes yet override the setting so that my colour takes top priority?

Answer 1

This occurs because of CSS specificity – table.table-striped tr is more specific than table tr. More specific rules override less specific ones. In my opinion you should avoid !important as long as possible, and instead focus on making your selectors more specific. So in your case, make that:

table.table-striped tr.zebraHover td {
    background-color: #FFFACD;
}