custom css being overridden by bootstrap css

Question

I am using Bootstrap 3 and I have a table showing some data. in this table I have applied some javascript for conditional formatting, in the event that a condition is met, I

Answer 1

Firstly, read Sean Ryan's answer - it is very good and informative, but I had to tweak his answer enough before implementing in my code that I wanted have a distinct answer that might help the next person.

I had almost the same question as the OP but also needed to be able to highlight the row, too. Below is how I enhanced(?) Sean Ryan's answer and turned it into my final implementation, which allows you to add a class to most any random element, including to a "tr" or a "td"

See this on bootply.com

CSS

    /* enable 'highlight' to be applied to most anything, including  & , including bootstrap's aggressive 'table-stripe'
see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css

FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756

I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/

.highlight {
    background-color: lightyellow;
}


/* supersede bootstrap at the row level by being annoyingly specific 
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
    background-color: pink;
}

/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
    background-color:lightgreen;
}

HTML

    

        

            
Col 1
            
Col 2
            
Col 3
        
    
    

        

            
1hi
            
hi
            
hi
        
        

            
2hi
            
This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap
            
hi
        
        

            
3hi
          
This whole row should be highlighted.
            
hi
        
        

            
4hi
            
hi
            
hi
        

            
5hi
            
Just a specific cell to be highlighted
            
hi