Geek Answers Handbook

How can I avoid overwriting css properties?

Take this code:

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

100px width only applies to:

 #wh_wrapper -> #slider -> scollButtons left

If I do this:

 .left { width: 50px; }

all

 .left

classes now have a width of 50 pixels, including the previous one.

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

I hope I could explain myself.

thanks

EDIT:

Now I got it! 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 didn’t decal the border before I can’t put the important value in it, anyway #wh_wrapper # slider.scrollButtons.left will now have a border property. Anyway this?

+4
source share
3 answers

Yes, put !important behind them:

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

Beware: Internet Explorer 6 and previous versions simply ignore !important , while IE 7 supports them. More information about this can be found here or here .

!important is something to consider, but you should try to avoid it. In most cases, it can be avoided by building a better html / css tree or adding a class (try to keep them common, though;)).

@EDIT: you should always put the most general selectors on top and build on more specific ones. for example: put the img {} selector on top to provide a global qualifier for all your images, then you will more and more converge.

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

etc. Do not try to overdo it with classes and identifiers, the more generic html / css is better. containers and wrappers are often overused and become unnecessary. Try writing good semantic html and keep html and css separate. Do not use css when you need HTML (and vice versa)

Often it is better to create the whole html file, and when everything looks good, put css for the last stroke.

+11
source

I tried it! important?

+2
source

I tested your code in Opera, Chrome, FF and IE, and everyone prefers the first line over the second, regardless of the order in which the rules are executed. In the sample, you inserted a space there in ".scrollButtons.left" - if I use this code, then (of course) it always matches the second rule. Are you sure this is not a problem?

0
source

More articles:


All Articles