View Full Version : Localised CSS reset

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.

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

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.

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">
<div class="example">

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;}