CSS styles for all instances of a WordPress widget

Question

I am working on a website which uses a few different widgets. There is a specific style for all the widgets and they are all different. HOWEVER, each instance of that widget is the same.

For example, a recent posts widget has a purple background, no other widget has a purple background, but every time the recent posts widget is used it has a purple background.

When I have put the css into my theme, I notice the widget is appended with its instance, e.g. recent-posts-2 but the problem is, if I then drag the recent posts widget into another sidebar it become recent-posts-3 and my css is no longer working.

Does anyone have any idea how I can create css for the whole family of recent posts so no matter what the instance is the css will work?

Thanks so much!

Answer 1

Can't help you without seeing the code but the only solution I would think of with your description would be with some jQuery using the contains selector, finding a string that you know won't change and then using addClass() to add a class to it with a background-color:purple !important; in css.

So for example $('.sidebar .widget:contains("text")').addClass('purlplebg');

Answer 2

try to add to your CSS:

.recent-posts-global{background-color:purple !important;}

and add it anywhere you create your recent-blog items it will override the background color.