...

View Full Version : Localised CSS reset



IanIan
02-06-2012, 07:44 PM
Hi there,

I only want to apply a CSS reset to everything that appears inside one top level div.

Normally its easy to override a CSS reset because the reset is only applied to tag names. e.g. 'p { margin: 0; }'. If I try however and assign the reset to a top level div, e.g. '#main p { margin : 0; }' then its harder to override the reset because the reset is already quite specific!

Any ideas how I can get around this?

Cheers, Ian.

felgall
02-06-2012, 09:15 PM
There has to be something to identify the ones where you want to do the overriding.

If it is a class attached to the paragraph then you can use

#main p.classname

which is more specific than without the class name

IanIan
02-07-2012, 12:13 AM
I guess so. I think it might be worth forgoing a reset in this situation. All that specificity could get tiresome.

VIPStephan
02-07-2012, 03:09 AM
Any ideas how I can get around this?

Either with the !important keyword or with an even more specific rule.

Consider this HTML:


<div id="main">
<p></p>
<div class="example">
<p></p>
</div>
</div>


Example 1:


#main p {margin: 0;}
.example p {margin: 1em 0 !important;}

Example 2:


#main p {margin: 0;}
#main .example p {margin: 1em 0;}


An alternative to example 2 would be to use a selector/element that is even higher in the DOM than the #main div, e. g. if the body has a specific class or ID you can use that one like:


.bodyClass .example p {margin: 1em 0;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum