santa santa - 24 days ago 8
CSS Question

Using the wildcard attribute selector in CSS

Is it possible to use wildcard to select data attribute by name with CSS only?

[data-widget-type="*.color"] {
color: orange
}

<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>


http://jsfiddle.net/

Answer Source

Yes, it's possible, just not quite the way you've done it. You need to move the delimiter (in your case, the "wildcard" asterisk) outside of your string declaration. There's also a better delimiter for what it looks like you're trying to select. Here's the right attr selector:

li[data-widget-type$="color"] {
    color: orange;
}
<ul>
    <li>asdasd</li>
    <li data-widget-type="red.color">asdasd</li>
    <li data-widget-type="none.color">asdasd</li>
</ul>

This will select all the li elements with data-widget-type values that end in color, and change their color to orange.

Here's a JSFiddle demo to play around with it yourself.