Specificity of CSS properties
1) #divID input[type='text']
{
height:30px;
}
2) #divID .ClassName
{
height:40px;
}
For a textbox in a div, I have the above styles. 2 is more specific than 1, but the render height is 30px. How it works?
2 is no more specific than 1.1 is actually more specific.
CSS selectors are divided into three levels (for purposes of this discussion, it is actually more of an attribute style
and !important
).
The ID selector #
is at the highest level.
Classes and attributes .ClassName
, [type=text]
, [id=x]
are on the second level as the pseudo.
Elements and pseudo-elements are at the lowest level.
Connections at one level move to the next level. Both sets of rules are ID-bound and the class / attribute-level ( .ClassName
and are [type=text]
bound).
The first set of rules has the element as part of the selector, while the other does not. Thus, the first set of rules wins at the lowest level.
http://css-tricks.com/specifics-on-css-specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity