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

Use

.table-striped > tbody > tr:nth-child(odd) > td.red {
    background-color:red;
    color:white;
}

to create more specific selector, or the !important keyword (as shown by Andrew)

Alternitvaly, and probably best, you can create a custom bootstrap configuration, which not includes table styling (Uncheck Tables in Common CSS)

Answer 2

You can apply a value of !important after the value you want to take precedence.

Answer 3

Specificity

Your issue is most likely regarding specificity. Chris Coyier has a great article on CSS specificity. I would also suggest you check out this handy specificity calculator.

Using that calculator, we can see that .table-striped > tbody > tr:nth-child(odd) > td has a specificity of 23. As such, to override that, any new rule needs to have a specificity of something equal to or greater than 23. .red is at 10, so that isn't going to cut it.

In this case, it should be as simple as matching the existing specificity, and then adding your class to it. .table-striped > tbody > tr:nth-child(odd) > td.red gives us a specificity of 33. As 33 is greater than 23, your rule should now work.

See a working example here: http://bootply.com/91756

!important

In general, you should never use !important unless you never want that rule to be overridden. !important is basically the nuclear option. I am moderately confident in saying that if you understand specificity, you should never need to !important to make a custom rule work properly in a framework like Bootstrap.

Update

After a bit of thought, the rule I provide here is probably a bit too specific. What happens if you want to higlight a cell on a table that isn't stripped? To make your rule a bit more global while still having enough specificity to work in stripped tables, I would go with .table > tbody > tr > td.red. This has the same specificity as the Bootstrap stripping, but will also work on tables that are not zebra stripped. Updated example is here: http://bootply.com/91760

Answer 4

I had a similar problem, also after using !important the problem stayed.

The problem depends on which browser we are using, in my case it was Chrome. Normally chrome stores frequently used sites and does not always fully page reload.

The issue was solved only after clearing the chrome history or Ctrl+Shift+R.

Answer 5

You can add !important after each style in the .red class. Adding !important basically will give the CSS more weight which allows you to override other styles.

Your css would look like:

.red {
    background-color: red !important;
    color: white !important;
}

Answer 6

Would it not be a solution that instead of applying a class, append css to the element?