CSS Selector wildcard for WordPress widget

[madsrh]

Hi
It seems that whenever I add a widget to the wordpress sidebar, it adds a number (of how many times this widget has been in the sidebar) to the ID. A bit hard to explain, but try this…

I have a calendar widget in the sidebar and it’s ID is events-list-widget-1.
If I remove the calendar widget and then add it again, it’s now called events-list-widget-2.

Is there a way for me to select the events-list-widget regardless of the number? like events-list-widget-*

best regards and thanks for reading this far :-D
MadsRH

[SgtLegend]

You can do this by using a CSS attribute selector which won’t work in IE8 and below but it’s dead simple to write up some jQuery code for IE, see the examples below.

See the below post

[madsrh]

SgtLegend -> Exactly what I was looking for. However I can’t get it working on my site. I think it has something to do with the ID being inside a class. This is the css for changing the background color:

.widgetcontainer#events-list-widget-4 {background: #6495b5;}

[SgtLegend]

Sorry got the selector wrong, try the below.

CSS

div[id^=events-list-widget],

.events-widget-ie {

color: red;

}

See the below post

[madsrh]

Thanks for the fast reply SgtLegend. It’s still not showing CSS changes :-(

[SgtLegend]

Is there a live view of your website as it’s hard to debug without looking at it.

[madsrh]

Sure, http://www.madsrosendahl.dk

[SgtLegend]

I searched through your site and couldn’t find the CSS but found the jQuery and an error i made with it, see the fixed jQuery code below. If you have or are using a cache like W3 cache make sure to clear it as the changes won’t appear until then.

jQuery for IE

jQuery(function($) {

if ($.browser.msie && $.browser.version < '9.0') {

$('div[id^=events-list-widget]').each(function() {

$(this).addClass('events-widget-ie');

});

}

});

[madsrh]

Ah, I see. You couldn’t know that the code was inside another css file: http://madsrosendahl.dk/wp-content/plugins/arras-tweak/style.css

I’ve added directly into the head now, but I still don’t see the change reflected on the site.

[SgtLegend]

Alright i see why it’s still not working, the elements are LI tags not DIV tags so all you simply need to do is swap out the tag names.

[madsrh]

Awesome! It’s working now. I would never have figured that out by myself :-D

Thanks you very very much for all your help. You’ve improved my site tremendously.

best regards
//MadsRH

[SgtLegend]

No problem, glad i could be of assistance.

[Author]

Posts