JQuery Plugin Stylesheet

Question

I've got a jquery plugin which comes with its own stylesheet. However, when I include my own stylesheet along with that of the plugin, the plugin stylesheet always gets affected by the css in my own stylesheet.

Is there a way to prevent this?

Can you provide some code? What do you mean that plugin comes with a stylesheet? Does it use inline styles? — Robert Koritnik
– Robert Koritnik, Commented Feb 22, 2011 at 8:16
Include your stylesheet first? Or make sure you're not overdeclaring/creating conflicts. Maybe you can provide your css? — TNC
– TNC, Commented Feb 22, 2011 at 8:17
it creates conflicts. Say, the links in my style sheetsheet are red, and those in the plugin stylesheet are not declare, it is inheriting the colors. How do i prevent that inheritance? — Hirvesh
– Hirvesh, Commented Feb 22, 2011 at 8:22

Alexey Lebedev · Accepted Answer · 2011-02-22 09:45:11Z

4

There's no quick fix. You either have to resolve conflicting styles by hand, or prefix every style in plugin's CSS with some class name, e.g.

.plugin-x h1 { ... }
.plugin-x li { ... }
.plugin-x .info { ... }

And then wrap HTML element your plugin generates in a div with that special class name:

  <div class="plugin-x"><!-- html generated by the plugin here --></div>

In the case when your own global styles affect the plugin styling, e.g. links become red, you'll have to add this style:

.plugin-x a { color: black }

Or simply edit plugin's stylesheet and specify the color you want.

answered Feb 22, 2011 at 9:45

Alexey Lebedev

12.2k4 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anriëtte Myburgh Over a year ago

Yep, like poster said, there's really no easy fix.

Collectives™ on Stack Overflow

JQuery Plugin Stylesheet

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related