Question

As an example I got a css class which applies to all labels within my website.

label
{
 font-size: 18px;
}

Now after i install a external JS plugin i find that the plugin itself is affected by my base css.

<div>
    <div class="plugin" />
    <label>Xyz</label> 
    //Dynamic html inserted by plugin
</div>

The plugin has its own stylesheet so how can i prevent my base css style touching any elements within the plugin div?

EDIT

I must add that label was a very simple example. The actual layout is more complex with global styles touching various elements.

Answer 1

Don’t make your css too general, try to be as specific as possible when you want to style only some of your elements. If you can’t select your elements without affecting the plugin’s elements add a class to them.

label{ /* too general, don't use this */
 /* ... */
}
body > div > form > label{ /* more specific, but maybe still affecting your plugin */
 /* ... */
}

label.noplugin{ /* use a class on non-plugin elements */
 /* ... */
}

div:not(.plugin) > label{ /* affecting only children of div which are NOT
    tagged with the plugin class */
 /* ... */
}

So in your case a better way to style your label would be

<div>
    <div class="plugin">
    <label>Xyz</label>
    //Dynamic html inserted by plugin
    </div>
</div>

CSS:

*:not(.plugin) > label
{
 font-size: 18px;
}

Please note that :not is unfortunately not supported by IE ≤8.