Question

I like what twitter has done with bootstrap css, except for their resetting the fieldset and legend tags.

Q: Short of cutting those definitions out of bootstrap.css, is there a way to tell the browser to ignore those commands?

The reason why I don’t want to change bootstrap.css is in case they update it some time in the future, I might not remember to go back in and say “Everything is good except for these 2 definitions”.

Answer 1

Just redefine it to what you want below the bootstrap.css definitions. Later css always overrides early css (assuming the !important flag is not set on the earlier).

So:

legend {color: red;} /*pretend this is bootstrap's definition*/

legend {color: green;}

will produce green text.

NOTE: you do need to be aware of css specificity. Class and ID’s and other such css can make the definition more specific, so to override it, later css must have equal or greater specificity.

.box legend {color: red;} /*pretend this is bootstrap's definition*/

legend {color: green;}

Would produce red text if the legend is in a box classed element because of the higher specificity of the .box class. You would need to at least match that specificity:

.box legend {color: green;}