Ignore document style rules in one element.

Question

I write a greasemonkey script that adds sticky notes to websites. Because there sometimes are pretty strange style rules used in some websites the sticky notes sometimes turn up messed up (or at least not looking like I want them to look).

Is there a way to say "under this element do not apply any generic stylerules"? So that rules associated with tag names are not applied, but rules associated with certain classes and ids still are. Or does anyone have a better idea on how to ensure that only my styles are applied to the sticky notes?

Answer 1

AFAIK, that's not really possible.

In stead, you have to make sure you define every style you want manually. Don't rely on defaults. If you select your elements by I'd, they get high priority.

Answer 2

Have you tryed the "!important" keyword?

it overrides the css inheritance hierarchy.

Answer 3

This sounds like simply a css specificity issue to me, is it not? It seems like you should just make your css rules more specific, and resilient (don't relay on existing rules, expect defaults to be changed and write the rules that you need).

Here are some links to read up on css specificity:

• http://reference.sitepoint.com/css/specificity

• http://css-tricks.com/specifics-on-css-specificity/

Answer 4

It is indeed a specificity issue. I imagine that you have your sticky notes in a single div#stickyContainer element, in which case you should apply overriding CSS properties to elements by the fact they belong within that element, and ensure that you reset everything.

That is to say, within div#stickContainer div.sticky { ... } make sure that you set every CSS property to what you would like it to be, even if you're just setting them to a typical browser default, and include the !important keyword following each directive.

Answer 5

You can programmaticly delete generic style rules, but that would effect the whole page.

You might be able to programatically sniff the "generic" rules and then modify the sticky notes' style to counter. If you do that, please post the code. ;-)

But the best approach is probably just to put the sticky notes in iframes. Inside, the styles will be reset to browser defaults. You can then add custom CSS with no side-effects.