That’s a CSS specificity issue. .main_section article has a higher specificity value than .special-bg selector. In terms of value: Inline Style > IDs > Classes, Attributes, and Pseudo-classes > Element Types and Pseudo-elements, So the calculation of Specificity of these two CSS selectors would be: .special-bg Inline Style ID (Pseudo-)Class (Pseudo-)Element 0 0 1 0 … Read more
The .container rule doesn’t match the p element. So specificity is irrelevant here. Inheritance and specificity are separate concepts and the only time they interact is when more specific/less specific rules contain declarations with inherit. That is not the case here. As far as the p element is concerned, only the * rule applies, and … Read more
It is possible to increase the specificity of a selector using type selectors, but not conventionally. The reason for this is explained below, but for those who are simply looking for an alternative, there are two of these. You can either chain :not() pseudo-classes containing type selectors in a single compound selector: h1 {} /* … Read more
Do not use !important because it is the worst solution, if you want to switch the styling then do it that way. #idname{ border: 2px solid black; } #idname.classname { border: 2px solid gray; } <div id = “idname” class=”classname”>it is a test</div> If you want to target also other elements with the class classname … 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
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
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
Any declaration that matches element directly will get priority over the property that’s inherited from the element’s parent. Specificity has nothing to do with that.
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
Good question. I can’t tell for sure – all the articles I manage to find avoid the example of multiple classes, e.g. here – but I assume that when it comes to comparing the specifity between a class selector and an ID, the class gets calculated with a value of 15 only, no matter how … Read more