Search code examples
csstwitter-bootstrapcss-specificity

The result of CSS styles is not what I expect

I have the following html that is using Bootstrap stylesheets: <button class="label btn-lg">Save</button> My understanding of CSS Specificity rules that btn-lg overrides label values (When selectors have an equal specificity value, the latest rule is the one that counts). However, regardless which order I use for classes, label supersedes btn-lg

How do I make btn-lg override label?

Solution

  • "When selectors have an equal specificity value, the latest rule is the one that counts" This means that lowest CSS rule in your stylesheet will be applied. So in your case, the .label class appears after .btn-lg in the bootstrap stylesheet.

    Hope that helps.