It’s based on IDs, classes and tags. IDs have the highest specificity, then classes then tags, so: .item a == 0 1 1 0 (id) 1 (class=item) 1 (tag=a) .special == 0 1 0 #foo == 1 0 0 #foo .bar a == 1 1 1 #foo #bar == 2 0 0 whichever has the … Read more
See: w3c: 6 Assigning property values, Cascading, and Inheritance – 6.2 Inheritance An inherited value takes effect for an element only if no other style declaration has been applied directly to the element. This style applies to an element with id=”my_id”: #my_id { color: red; } … and will apply (inherit) to an element nested … Read more
Yes, it is possible and intentionally so. While this is not mentioned in the CSS2 spec, it is explicitly mentioned in the Selectors 3 spec: Note: Repeated occurrances [sic] of the same simple selector are allowed and do increase specificity. Therefore browsers must increase the specificity when encountering repeated simple selectors, as long as the … Read more
This is due to specificity: although a is an element type selector which is less specific than a class selector, it’s accompanied by a :link pseudo-class which is equally specific to your .button class. A type + pseudo-class will therefore be more specific than a class. There is no inheritance going on here as there … 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
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
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
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