Specificity in CSS only concerns selectors, not their associated declarations. !important applies to a declaration, so it alone plays no role in specificity. However, !important influences the cascade, which is the overall calculation of styles for a certain element when more than one of the same property declaration applies to it. Or, as Christopher Altman … Read more
You could attempt to take a different approach, try to write your selectors as small (low specificity) as possible. and only make them more specific when needed. With that way of working you don’t need a tool.
I’d expect when I’m in resolutions of 600px and above to get a 2.2em h2, but instead I get 1.7em.. In my Dev tools I see that the 2.2em declaration is there, but the other one takes precedence.. It doesn’t make sense! It makes sense. If the media fulfills min-width: 600px, then it should also … Read more
The reason your CSS isn’t working is because of specificity. The Bootstrap selector has a higher specificity than yours, so your style is completely ignored. Bootstrap styles this with the selector: .navbar-default .navbar-toggle .icon-bar. This selector has a B specificity value of 3, whereas yours only has a B specificity value of 1. Therefore, to … Read more
Let me begin by saying that generally inline styles can be overridden: .override {color:red !important;} <p style=”color:blue;”>I will be blue</p> <p style=”color:blue;” class=”override”>But I will be red</p> This behavior is described in W3 specs, where it is stated that !important declarations do not alter the specificity, but rather take precedence over “normal” declarations. That being … Read more
Pekka’s answer is practically correct, and probably the best way to think about the issue. However, as many have already pointed out, the W3C CSS recommendation states that “Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.” So the geek in me just had to figure out just … Read more
Yes, I’d say your example of using !important is bad practice, and it’s very likely it would cause undesired effects further down the line. That doesn’t mean it’s never okay to use though. What’s wrong with !important: Specificity is one of the main forces at work when the browser decides how CSS affects the page. … Read more