Custom CSS being overridden by Bootstrap CSS

by

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

More Related Contents:

  1. Bootstrap dropdown sub menu missing
  2. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  3. Center a column using Twitter Bootstrap 3
  4. Bootstrap 3 fluid grid layout issues?
  5. How to change the bootstrap primary color?
  6. Why did Bootstrap 3 switch to box-sizing: border-box?
  7. How to use particular CSS styles based on screen size / device
  8. Bootstrap: how to stack divs of different heights?
  9. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  10. Bootstrap icons are loaded locally but not when online
  11. Right to Left support for Twitter Bootstrap 3
  12. Input widths on Bootstrap 3
  13. Change the order of col-*-12 columns in Bootstrap using push/pull
  14. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  15. Bootstrap 3 – Use more than 12 columns in a row
  16. Bootstrap xs columns wrap
  17. Changing the width of Bootstrap popover
  18. How to change btn color in Bootstrap
  19. Bootstrap 3 – desktop view on a mobile device
  20. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  21. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  22. Make column fixed position in bootstrap
  23. Bootstrap 3: pull-right for col-lg only
  24. How to use vertical align in bootstrap
  25. Centering the image in Bootstrap
  26. How to add a search box with icon to the navbar in Bootstrap 3?
  27. Shrinking navigation bar when scrolling down (bootstrap3)
  28. Vertically align Bootstrap badge inside heading
  29. Center a column using Twitter Bootstrap
  30. Bootstrap Grid System new line does not look nice

Leave a Comment