Bug or feature in css?

A

Anatoly2011-11-11 18:20:41

css

Anatoly, 2011-11-11 18:20:41

Good afternoon, people, I just stumbled upon one interesting feature, and since I myself am not the best layout designer, I want to ask why it happens like this?

&lt;html&gt;
  &lt;head&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      form input[type=text]{
        width:100px;
      }
      .test input{
        width:200px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;input type=&quot;text&quot; /&gt;
      &lt;div class=&quot;test&quot;&gt;&lt;input type=&quot;text&quot; /&gt;&lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;

Why are both fields the same width? Why doesn't the second rule work? After all, it should overlap the rule on the second input.
And even if the class is moved to the field, it will not be perceived anyway.
UPD: I'm not looking for a solution to the problem, I want to know why this is happening!
This code also works unexpectedly (for me)

&lt;html&gt;
  &lt;head&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      form input[type=text]{
        width:100px;
      }
      .test{
        width:200px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;input type=&quot;text&quot; /&gt;
      &lt;div&gt;&lt;input type=&quot;text&quot;  class=&quot;test&quot; /&gt;&lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;

Reply

Answer the question

In order to leave comments, you need to log in

5 answer(s)

A

avrelian, 2011-11-11
@taliban

The most specific selector plays.
Try like this
form .test input{ width:200px; }

A

avrelian, 2011-11-11
@avrelian

!importantIt's like the last bullet. You have to take care of yourself...

A

Anatoly, 2011-11-11
@taliban

This code also works unexpectedly (for me)


<html>
  <head>
    <style type="text/css">
      form input[type=text]{
        width:100px;
      }
      .test{
        width:200px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" />
      <div><input type="text"  class="test" /></div>
    </form>
  </body>
</html>

T

tick, 2011-11-11
@tick

want even more magic?

<html>
    <head>
        <style type="text/css">
            input[type=text]{
                width:100px;
            }
            .test input{
                 width:200px;
             }
         </style>
    </head>
    <body>
        <form>
            <input type="text" />
            <div class="test"><input type="text" /></div>
        </form>
    </body>
</html>

the length will be different
and change the order of the styles - the length will be the same.

S

Sergey, 2011-11-12
Protko @Fesor

Selector priorities are different. Here they don't overlap. This is not even a feature, but one of the key features.