How can I avoid the overwriting of css properties?

Question

Take this code:

#wh_wrapper #slider .scrollButtons.left {
  width: 100px;
}

the width of 100px is being applied only to:

#wh_wrapper -> #slider -> scollButtons left

If I do this:

.left {
   width: 50px;
}

all the

.left

classes has now a width of 50px, including the one from before.

Now, I completely understand how to avoid this error (setting specific classes, putting .left before #wh_wrapper #slider .scrollButtons.left etc..) what I'm asking is if there is a way to specify properties that cannot be overwritten by "global" properties.

I hope I was able to explain myself.

Thanks

EDIT:

I now understand !important :-)

But look at this other example:

#wh_wrapper #slider .scrollButtons.left {
  width: 100px !important;
}

.left {
   width: 50px;
}

Now #wh_wrapper #slider .scrollButtons.left will still be 100px, but what about:

.left {
   width: 50px;
   border: 1px solid #000;
}

since I haven't decalred a border before I can't put an important on it, still the #wh_wrapper #slider .scrollButtons.left will now have a border property. Any way areound this?

Answer 1

Yes, put !important behind them:

.class{
 height:100px !important;
 width: ...etc
}

Watch out though: Internet Explorer 6 and previous versions simply ignore !important, while IE 7 supports them. More info on this can be found here or here.

!important is something to consider, butyou should try to avoid it. Most of the times it can be avoided by building a better html/css tree or adding a class (try to keep them generic though ;)).

@EDIT: You should always put the most generic selectors on top, and the build down to the more specific ones. for example: put a img{} selector on top to provide a global specifier for all your images, then you go down more and more specific.

wrapper img{} wrapper container img{} wrapper container div.something img{}

and so on. Don't try to overdo the classes and ID's, the more generic your html/css is the better. containers and wrappers are often overused and unnescessary. Try to write good semantic html and keep html and css seperated. Don't use css when you should us HTML (and vice versa)

Often it is better to create your whole html file, and when everything looks good, provide css for the finishing touch.

Answer 2

Tried !important?

Answer 3

I tested your code in Opera, Chrome, FF and IE and all prefer the first line over the second one, no matter what the order of the rules is. In the sample you pasted there's a space missing in ".scrollButtons.left" - if I use that code then it (of course) always matches the second rule. Are you sure this isn't the problem?