css-specificity

I'm redesigning my blog with responsive web design in mind, and the "mobile first" method - In short I'm trying to use min-width to avoid any kind of replication or css.. no display:none's etc.. My problem is that when I do need to over-write a CSS value, the lower min-width takes precedence. Example: @media only screen and (min-width: 600px) { h2 { font-size: 2.2em; } } @media only screen and (min-width: 320px) { h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } } 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

I have a element like this: #idname{ border: 2px solid black; } .classname{ border: 2px solid gray; } <div id = "idname" class="classname">it is a test</div> I want to give a bigger priority to its CSS class instead of its CSS id. Is it possible? (In other word I want to set gray -color as its border ) 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 spec states regarding calculating CSS specificity: (bold mine) Note: Repeated occurrences of the same simple selector are allowed and do increase specificity. So for example .class.class {} has twice the specificity than .class {} - DEMO However, regarding the term ' simple selector ' the spec has this to say: (bold mine) A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. So since the spec says that repeated occurrences of the same simple selector are allowed - this would

I have the following: <section class="main_section"> <article> ... </article> </section> In my stylesheet I have: .main_section article { background-color:#fff; /* ... */ } The article is styled, and I am happy about it. Now, for a single instance of article , I want to do the following: <section class="main_section"> <article class="special-bg"> ... </article> </section> Which I have defined: .special-bg { background-color: #276a7f; } But the class is not setting the background-color. It seems that the styling of the html tag article takes precedence, no matter the order of the CSS rules in

If you have <div style="display: none !important;"></div> Is there a way to override that in the style sheet to make it displayed? Preferably using something similar to this: div { display: block !important; } o.v. 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> Fiddled 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"