Using the wildcard attribute selector in CSS

Question

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/

Are you asking how to select attrs where color appears anywhere, or only attrs where color is at the end? E.g., Red Devil's answer is for the former, mine is for the latter. — TylerH
– TylerH, Commented Sep 28, 2015 at 19:38

TylerH · Accepted Answer · 2017-09-25 20:39:47Z

2

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.

edited Sep 25, 2017 at 20:39

answered Sep 28, 2015 at 19:35

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

0x860111 · Accepted Answer · 2015-09-28 19:34:44Z

1

[data-widget-type*="color"] {
  color: red;
}

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

More info about Attribute selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

answered Sep 28, 2015 at 19:34

0x860111

3861 gold badge3 silver badges15 bronze badges

Comments

Ahmet Can Güven · Accepted Answer · 2015-09-28 19:48:16Z

    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>

You can use css selectors for that too.

For specific atribute you can use [] and if you are comparing something in css and want to search at the beginning ^= or if you want to find it at the end $= you can use this.

Also if you don't know where the word is in the comparing word then you can use wildcard * too. So in our case it is li[data-widget-type*=".col"]

As an advice, I like to struct my css files like this. I always have a css class for colors.

li[class*="red"] { 
    color: red;
}

So I can also reach it from any other class like any-red, new-red when I don't want to use single red class.

Also don't forget that you can also use li[data-widget-type|="red"] for elements that starting with red. This is an old but good move from CSS2, some browsers may reject it so take care.

So here is the jsFiddle and here is the snippet.

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>

Collectives™ on Stack Overflow

Using the wildcard attribute selector in CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related