wildcard * in CSS for classes

css css-selectors wildcard

I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

Is there a way to have just 1 class tocolor-*. I tried using a wildcard * as in this css, but it didn't work.

.tocolor-*{
  background: red;
}

Here's the official CSS3 site about selectors: w3.org/TR/css3-selectors And a compability list: findmebyip.com/litmus

davidhartman00

What you need is called attribute selector. An example, using your html structure, is the following:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element.

[class^="tocolor-"] — starts with "tocolor-".
[class*=" tocolor-"] — contains the substring "tocolor-" occurring directly after a space character.

Demo: http://jsfiddle.net/K3693/1/

More information on CSS attribute selectors, you can find here and here. And from MDN Docs MDN Docs

Cool info. Only caveat is if performance is an issue, most CSS linters will reject attribute selectors that resemble regex (e.g. using '*') b/c of slow performance. With the exception of using a preprocessor (e.g. Sass), is there any other possible way of doing this?

Is there a way to check if the class attribute contains multiple substrings? Maybe something like div[class*="foo"][class="bar"]?

That space in our "contains" example is pretty killer. From what I can see, it shouldn't be there, correct?

@Thomas That is required to ensure class="foo tocolor-red" matches, but not class="foo fromtocolor-red-blue"

Thanks for this. I've been using this technique for a few years, but never realized that class^= only applies to the beginning of the HTML class entry. I thought it applied to all class names defined for the HTML tag.

thomas.han

Yes you can do this.

*[id^='term-']{
    [css here]
}

This will select all ids that start with 'term-'.

As for the reason for not doing this, I see where it would be preferable to select this way; as for style, I wouldn't do it myself, but it's possible.

Thank you for this ID based addendum, not just for class.

Poul Kruijt

An alternative solution:

div[class|='tocolor'] will match for values of the "class" attribute that begin with "tocolor-", including "tocolor-1", "tocolor-2", etc.

Beware that this won't match

<div class="foo tocolor-">

Reference: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D)

This won't work if the class attribute starts with some other class that doesn't begin with tocolor.

This also works beautifully in Qt's widget styleSheets. For example, to apply a style to all labels named foo*, you'd do QLabel[objectName|='foo'] { ... }

As @BoltClock said, this solution breaks if the element has multiple classes and they don't start with the class OP is looking for.

DKSan

If you don't need the unique identifier for further styling of the divs and are using HTML5 you could try and go with custom Data Attributes. Read on here or try a google search for HTML5 Custom Data Attributes

wildcard * in CSS for classes

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US