Search code examples
htmlcsscss-specificity

CSS property specificity

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?

Solution

  • 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