Question

1)  #divID input[type='text']
    {
       height:30px;
    }

2)  #divID .ClassName
    {
       height:40px;
    }

For a text box in a div, I have the above styles defined. 2 is more specific than 1, but the rendered height is 30px. How does it work?

Answer 1

2 is not more specific than 1. 1 is actually more specific.

CSS selectors are divided into three levels (for the purposes of this discussion; there are actually more because of the style attribute and !important).

The ID selector # is at the highest level.

Classes and attributes .ClassName, [type=text], [id=x] are on the second level as are pseudo-classes.

Elements and pseudo elements are on the lowest level.

Ties on one level move to the next level. Both rulesets are tied for the ID and the class/attribute level (.ClassName and [type=text] are tied).

The first ruleset has an element as part of the selector, but the other has none. Thus, the first ruleset wins on the lowest level.

http://css-tricks.com/specifics-on-css-specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity