Grow your CSS skills. Land your dream job.

CSS Selector wildcard for WordPress widget

  • # September 26, 2011 at 3:52 pm

    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

    # September 27, 2011 at 2:02 am

    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

    # September 27, 2011 at 3:08 am

    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;}
    # September 27, 2011 at 4:38 am

    Sorry got the selector wrong, try the below.

    CSS

    div[id^=events-list-widget],
    .events-widget-ie {
    color: red;
    }

    See the below post

    # September 27, 2011 at 5:54 am

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

    # September 27, 2011 at 8:30 am

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

    # September 27, 2011 at 4:05 pm

    Sure, http://www.madsrosendahl.dk

    # September 28, 2011 at 2:36 am

    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');
    });
    }
    });
    # September 28, 2011 at 5:58 am

    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.

    # September 28, 2011 at 7:33 pm

    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.

    # September 29, 2011 at 3:32 pm

    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

    # September 29, 2011 at 8:59 pm

    No problem, glad i could be of assistance.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".