Some Background: I am authoring a WordPress plug-in. The html emitted by the plug-in will be placed on sites/pages that I don't control and in ways I can't predict, but I would like the look-and-feel of the plug-in to remain constant (unless specifically overridden). Essentially, the goal is to avoid any "unintentional side-effects" of previously declared styles.

My Question: Is there a way to apply css to an element to "reset" all styles for descendants of that element? For instance, in the following example, I would like to "reset" all styles for any descendants of #myPlugin:

... [[HTML Content Beyond My Control]]...

<div id="#myPlugin">
    My Stuff goes here.... I would like the styling of elements here to be "cleared" or "reset"

... [[More HTML Content Beyond My Control]]...

3 answers

This was chosen as the best answer

Am I missing something?

you could easily use a reset like this:

#myplugin *
   margin: 0;
   padding: 0;
   any appropriate attributes

and whatever you declare would apply to whatever elements are in your plugin, but rather than reset everything just use specificity to set the styles you want for your plugin elements.

of course someone will be able to remove your styling, unless you put it all inline.

Answered about 9 years ago by Tony Crockford
  • I thought so. I thought I tried this and ran into some issues, but I'm going to give it another shot. Franklin about 9 years ago
  • You might need to diagnose your declarations with an inspector (like firebug) in case there are some more specific declarations in the WP CSS, but inline css should take precedence over any other anyway (but watch out for !important being used elsewhere) Tony Crockford about 9 years ago

The only thing you can do is put it in an iframe, which will probably annoy everyone. Really, why shouldn't end users be able to re-style your content if they want to?

Answered about 9 years ago by Nathan Duran
  • I have to agree, its better to design your site in a way so that if users show it by default, it looks nice in your ment to be design, but if they have their own preferences overriding your design, it should degrade nicely Menno Geelen about 9 years ago
  • The goal is not to fully control the style, to wipe the slate clean of any *unintended* styling consequences. They *would* be able to restyle the plug-in by explicitly overriding the css that is applied by my external stylesheet. But this would be an explicit override as opposed to an unintended side-effect. Franklin about 9 years ago

Im not sure if there is something like that possible. First things that shoot to mind are: an external stylesheet with all the 'default' or reset values, then with JS (or in any other way) apply that stylesheet to that div. This is a default reset stylesheet i mostly apply before applying all my own css :\

But as said, i dont know if there is a way to reset all styles on the fly.
Again, JS would probably be your best option. think in ways as: get all elements within that div then clear every style of that element (doesnt sound like a nice fast and clean wayu to go does it? ;))

Answered about 9 years ago by Menno Geelen