Clever Geek Handbook

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?

+3


source to share


1 answer


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

+7


source






More articles:


All Articles