Search code examples
htmlcsscss-selectorscss-specificity

CSS Precedence Rules are not being applied properly on the Width of an input box

I have a problem with the CSS precedence of an input box. A width of 96% is being applied while according to precedence rules an auto width should be applied. If I apply !important, the style I want is applied. However this is not how I would like to solve the problem.

I have an input box implemented in this way

<fieldset>
    <label>Search</label>
    <input type="text" class="standard-size"> <!-- Referring to this -->
</fieldset>

And impacted by these 2 CSS declarations:

fieldset input[type=text] {
        width: 96%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #BBBBBB;
        height: 20px;
        color: #666666;
        -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
        -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
        box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
        padding-left: 10px;
        background-position: 10px 6px;
        margin: 0;
        display: block;
        float: left;
        margin: 0 10px;
}

.standard-size {
    width: auto ;
}

According to this link: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

precedence works this way (Inline Style , ID, Class, Element). A number on the left precedes any number on the right.

In my case: fieldset input[type=text] translates to (0,0,0,2) because fieldset and input are 2 elements AND .standard-size translates to (0,0,1,0) because .standard-size is one CSS class

(0,0,1,0) should take precedence over (0,0,0,2) because the 1 is simply more to the left than the 2 and that makes it more important. So why is the width of 96% taking over?

Thank you

Solution

  • You forgot to count the [type=text] attribute selector, which is equivalent to a class selector (also mentioned in the article you linked to):

    fieldset input[type=text] /* 1 attribute, 2 types -> specificity = (0, 0, 1, 2) */
.standard-size            /* 1 class              -> specificity = (0, 0, 1, 0) */

    While an attribute selector and a class selector are equivalent, it's the two type selectors in your first rule that cause it to outweigh the second.