3 replies [Last post]
lwoods
Offline
Regular
Last seen: 25 weeks 6 days ago
Timezone: GMT-7
Joined: 2004-07-14
Posts: 30
Points: 15

I have a page that contains a '
input#my_text {
width: 150px;
float: left;

( I realize that this should not be in the ' CSS was ignored! This is what I don't understand. The 'local' CSS comes after the style.css so why, based upon the cascade, doesn't it override the CSS in the style.css file? I was able to get the 'local' CSS to be recognized by adding an '!important' but I don't know why I had to do this.

Thanks for any clarification on this.

lwoods
Offline
Regular
Last seen: 25 weeks 6 days ago
Timezone: GMT-7
Joined: 2004-07-14
Posts: 30
Points: 15

Follow up - I screwed up the question. Here it is...

I have a style.css with the following in it:

form#myPostForm input {
   float: right;
   width: 80%;
}

I have a form with the id myPostForm and contains many input tags (text). I wanted to override one of the input tags so I gave it an id of myTextInput and added the following style:
<style>
input#myTextInput {
   width: 150px;
   float: left;
}
</style>

The above css was ignored with the style.css definition taking control. I don't understand why my style didn't override the style in the style.css file since my style came after the style.css, which was defined in the head of the page. I did get my style recognized by added an !important to each of the attributes but I didn't think that I had to do that---and I know the problems that this can cause.

Any help explaining this?

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Specificity

The selector in style.css has the higher rank, an ID attribute and two elements. Specificity is 0,1,0,2.

Your attempt has a lower specificity: one ID attribute and one element. Thus 0,1,0,1.

You simply need to give your new ruleset a higher rank. E.g. form input#mytextinput (0,1,0,2). Now they're equal and the last read will be rendered. To be more certain, you could do form#mypostform input#mytextinput (0,2,0,2).

See ยง6.4 The Cascade

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lwoods
Offline
Regular
Last seen: 25 weeks 6 days ago
Timezone: GMT-7
Joined: 2004-07-14
Posts: 30
Points: 15

Thanks. This is always a

Thanks. This is always a challenge when you are dealing with multiple sources of CSS. Don't know how to handle that.