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

You need to apply !important after class style. because we use the selector is .table-striped > tbody > tr:nth-child(odd) > td, which is more specific than the class rule and will take precedence. So you need to override this with !important.

But there are two ways to fix this:

1. Use !important to make a rule more "important". I'd avoid doing this because it is confusing when you have lots of rules spread out over several files.

2. Use a higher-specifity selector for the td you want to modify. You can add an id and this will allow you to supersede the rule from the linked CSS file.

Read css Precedence

Answer 2

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 <tr> & <td>, 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

<table class="table table-striped">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>2hi</td>
            <td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>3hi</td>
          <td>This whole row should be highlighted.</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>4hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr><tr>
            <td>5hi</td>
            <td class="highlight">Just a specific cell to be highlighted</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>