Font-size classes and nested html - html

Question

I've got a problem with CSS inheritance. Here's a simplified version of my stylesheet, where I am trying to control font-sizes in nested divs for my web-app :
CSS:
.type-small {
font-size: 24px;
}
.type-large {
font-size: 48px;
}
.type-small .btn {
font-size: 24px;
height: 28px;
}
.type-large .btn {
font-size: 48px;
height: 82px;
}
When you look at this sample HTML, the innermost type-small isn't used to format the "Save" button. It looks like CSS is picking up the classes irrespective of which is deeper nested in the HTML.
HTML
<div class="type-small">
<div class="type-large">
<button class="btn">Refresh</button>
<div class="type-small">
<p>Sample info </p>
<button class="btn btn-inverse">Save</button>
</div>
</div>
</div>
Take a look at this JSFiddle for an interactive version. Is there any arrangement of the CSS that would make this work (at scale)?
http://jsfiddle.net/HA5zy/

Answer 1

The inheritance ( specificity ) of
.type-large .btn { /* line 29 */
font-size: 48px;
height: 82px;
}
is greater than
.type-small .btn { /* line 25 */
font-size: 24px;
height: 28px;
}
When you mention "CSS is picking up the classes irrespective of which is deeper nested in the HTML." well, it's not the way it works.
To make it short, because your 2 declarations have the same weight, the one written AFTER in your css file will take precedence and be applied.
You can correct your situation by giving more specificity to your declarations like so:
.type-small .btn, .type-large .type-small .btn { /* enhence the weight */
font-size: 24px;
height: 28px;
}
Take note that the use if !important is discouraged and will lead you to another kind of problem sooner or later, like having the oposite html construction where you'll have a .type-large inside a .type-small.
One other thing, this point was raised by user Lucky Soni, you should consider constructing with minimum markups. Meaning, your whole html could be reformated to something like this :
<button class="type-large btn">Refresh</button><br/>
<p class="type-small">Sample info </p><br/>
<button class="type-small btn">Save</button>
jsFiddled here
See http://www.w3.org/TR/CSS2/cascade.html#specificity for more details and a better comprehension of cascading style.
6.4.1 Cascading order
To find the value for an element/property combination, user agents
must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the
associated selector matches the element in question and the target
medium matches the media list on all #media rules containing the
declaration and on all links on the path through which the style sheet
was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.

Answer 2

Why use additional markup just to apply these simple classes?
Modify your markup like:
<div class="type-small">
<button class="type-large btn"></button>
</div>
CSS:
.type-small {
font-size: 24px;
}
.type-large {
font-size: 48px;
}
.type-small.btn {
font-size: 24px;
height: 28px;
}
.type-large.btn {
font-size: 48px;
height: 82px;
}
Fiddle: http://jsfiddle.net/z7nzv/1/

Answer 3

.type-small {
font-size: 24px;
}
.type-large {
font-size: 48px;
}
.type-small>.btn {
font-size: 24px;
height: 28px;
}
.type-large>.btn {
font-size: 48px;
height: 82px;
}
Just specify that the .btn is an immediate child of the .type-x with the '>'.

Answer 4

Change your third class to this: (Notice the addition of "button")
.type-small button.btn {

Answer 5

Add the !important attribute like this:
.type-small .btn {
font-size: 24px!important;
height: 28px!important;
}