Home/ Questions/Q 6810843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:15:18+00:00

Why does this: .cssform input[type=text]{ /*width of text boxes. IE6 does not understand this

  • 0

Why does this:

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
    width: 180px;
    padding-bottom: 5px
}

has the higher precedence than this:

.cssform.wide input[type="text"]{ 
    width: 500px;
    padding-bottom: 5px
}

First one has 1 class and 1 element: (0,0,1,1)
Second one has 2 classes and 1 element: (0,0,2,1)

But the first style is applied (IE8 and FF). Why is that so?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    According to CSS specifity rules, second rule should be applied.
    However only in case it matches both rules. Potentially you apply rule
    for input element (what is natural for your case), but your css rule looks for
    descendant input element of element with class wide. So instead of .cssform .wide input use .cssform input.wide:

    .cssform input.wide[type="text"] {
    width: 500px;
    padding-bottom: 5px
}

.cssform input[type="text"] {
    width: 180px;
    padding-bottom: 5px
}

    And HTML:

    <html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
  <form class="cssform">
    <input type="text" />
    <input class="wide" type="text" />
  </form>
</body>

    General selection rules are as follows:
    1. Rules in <style> rather from other sources prefered
    2. Rule with higher number of ID attributes in the selector preferred
    3. Rule with higher number of other attributes and pseudo-classes in the selector preferred
    4. Rule with higher number of element names and pseudo-elements in the selector preferred

    If not clear enough, you can always check with rule specificity using tool such as
    suzyit

    • 0