CSS universal selector for numbers?

Question

I am trying to target an element that has a dynamic number associated with it. For example, one time it may be

#widget-5_yikes_mc_widget-__i__ > div.widget-top > div.widget-title > h4:before

and another instance of it may be

#widget-8_yikes_mc_widget-__i__ > div.widget-top > div.widget-title > h4:before

Is there a way I can target those elements regardless of the number associate to it? Maybe using a universal selector of some sorts? I've never used them so I'm having a little difficulty getting it set up.

The css I was trying was :

#widget-^_yikes_mc_widget-__i__ > div.widget-top > div.widget-title > h4:before

I'm not even sure this is possible with CSS

Answer 1

*[id^="widget-"] > div.widget-top > div.widget-title > h4:before

This uses the attribute prefix selector from CSS3.

If it also must end with _yikes_mc_widget-__i__ then:

*[id^="widget-"][id$="_yikes_mc_widget-__i__"] > div.widget-top > div.widget-title > h4:before

Or, if you can get away with just selecting something that has yikes_mc_widget in the middle:

*[id*="_yikes_mc_widget"] > div.widget-top > div.widget-title > h4:before

Answer 2

I'm slow but here's a fiddle as an example. There's no number selector but as noted, you can use other bits of the ID to target those elements.

div {
    background-color: grey;
}
div[id^=widget] {
    background-color: green;
}
div[id^=widget][id$=__i__] {
    background-color: red;
}

Reference:
http://css-tricks.com/attribute-selectors/
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors