1

I have element that could be injected into any page using a Firefox Addon.

Naturally, it and its ancestors are affected by the CSS rules defined on that page.

I can get so far by simply being explicit about every attribute, but even then my declarations may be overridden by an earlier declaration on the page with greater specificity.

Without making a huge mess of needlessly specific selectors and hanus use of !important, how could I go about resetting all elements' attributes under a given element (div#my_root_container_element) and ensure that my declarations under this parent element apply.

Using an iFrame is one option, but I would rather avoid it if possible - is there another way? Given the application, solutions need only work in Firefox.

Thanks.

doctororange
  • 11,670
  • 12
  • 42
  • 58
  • 1
    AFAIK specifying all the relevant CSS properties explicitly along with `!important` is the only way. If your CSS selector uses an ID then its specificity is high enough that no website rules will override it. – Wladimir Palant Sep 21 '11 at 07:12

2 Answers2

0

Obviously, it seems like this aims to override the "specificity" which is core to CSS in general, but this is the closest I remember ever seeing someone attempt it. It seemed somewhat reputable at the time coming from someone involved with the YUI project:

http://developer.yahoo.com/yui/reset/#code

fdfrye
  • 1,099
  • 7
  • 14
  • Thanks, but the idea with most resets (including this one) is to be light rather than complete, covering only attributes that regularly differ between browsers. – doctororange Sep 21 '11 at 05:23
0

Using SASS, it's not too unpalatable nesting everything under a div with an ID to achieve sufficient specificity, which is the solution I've opted for.

That said, any !important declaration made in the page CSS will overrule my styles.

doctororange
  • 11,670
  • 12
  • 42
  • 58