wildcard * in CSS for classes

Question

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; } 

Answer 1

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

Answer 2

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.