[CSS] Overriding Selector style with class

[Gregg Bolinger]

I have the following in an HTML and CSS file (combining for ease of reading):

input[type=text],input[type=password] {
  width: 150px;
  font-size: 10px;
}
 
.wide {
  width:300px !important;;  
}
 
<input type='text' name='foo' />
<input type='text' class='wide' name='something' />

The 'foo' text is 150px wide. The 'something' text is 300px wide. However, if I remove !important from the .wide class they are both 150px. I was under the impression that it went..

selector -> class -> style

as far as how an element's style is applied where the style attribute on the html elemenent takes highest precedent. Can anyone set me straight here?

Thanks.

[Bear Bibeault]

The order of application rules are confusing, and I don't claim to know them super well, but generally rules that are more specific will override rules that are less specific.

In your example, a tag name selector is more specific than the class selector.

If you want to avoid the important declaration, you can make the second rule more specific by making the selector:

input.wide

[ July 22, 2008: Message edited by: Bear Bibeault ]