How to clear CSS ascendant font on all descendants within a div?

Question

In my default style sheet, I set the default font like this:

body, div, span, ...
{
    font:normal normal normal 13px Arial, helvetica, Sans-Serif;
}

which works great, except that when I add a 3rd-party control on the page, it's inheriting this font, which makes it not display properly.

If I wrap the 3rd-party control in a div, how can I remove/clear the globally set font, so that anything inside the div will act as if the font was never set?

Answer 1

The only way to prevent a rule-set from applying to an element where the selector matches or to prevent inheritance is to explicitly set a different value.

• You cannot say "Inherit from an element that is not the parent"
• You cannot say "Ignore the author stylesheet for this element"

So figure out what "display properly" means, express that in CSS and apply it to the third party content.

Answer 2

You'd have to give a class, or id, to the div containing the 3^rd party control, and explicitly over-write the style rules for that container. Unless I'm missing something, if you set the default font for the body all children and descendants of the body should automatically inherit (you shouldn't need to specify div, span /* etc */).

But you can't specify a non-inherit rule, you have to over-write inheritance, sadly (though sensibly, I think).