PROBLEM:

• We have these divs that styling with .tocolor, but we also need the unique identifier 1,2,3,4 etc. so we are 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-*. we tried using a wildcard * as in this css, but it didn’t work.

.tocolor-*
{
  background: red;
}

SOLUTION 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.

SOLUTION 2:

• You can use this.

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

• This will select all ids that start with ‘term-‘.

SOLUTION 3:

• An alternative solution:

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

[att|=val]

• Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-” (U+002D)

SOLUTION 4:

• 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.
• Try a google search for HTML5 Custom Data Attributes

SOLUTION 5:

HTML – for CSS Wildcard :

<div class="mark-as-unread otherClass">   Book 1   </div>
<div class="mark-as-reading otherClass">   Book 2   </div>
<div class="mark-as-read otherClass">   Book 3   </div>
<div class="mark-as-not-interested otherClass">   Book 4   </div>
<div class="mark-as-unread otherClass">   Book 1   </div>
<div class="mark-as-reading otherClass">   Book 2   </div>
<div class="mark-as-read otherClass">   Book 3   </div>
<div class="mark-as-not-interested otherClass">   Book 4   </div>

CSS – for CSS Wildcard :

div[class*='-read'] {color:blue; }
div[class*='-read '] {text-decoration:line-through;}
div[class*='mark-as'] {font-style:italic; }
.otherClass {font-size:200%;}
div[class*='-read'] {color:blue; }
div[class*='-read '] {text-decoration:line-through;}
div[class*='mark-as'] {font-style:italic; }
.otherClass {font-size:200%;}

SOLUTION 6:

• Apparently you can do wildcards in CSS3 with attribute selectors.

.classname-* {}
element[class*='CLASSNAMEPREFIX'], element[class^=' CLASSNAMEPREFIX']

• e.g. if we have classes mike-1, mike-2, mike-3, mike-all and we want them to share the same border style

div[class*='mike-'], div[class^=' mike-'] 
{ 
border: 1px solid #f00;
 }

Following CSS attribute selectors,

• * – will match any part of the attribute value to the given string
• ^ – will match if the attribute begins with the given string (think class prefixes)
• $ – matches if the attribute ends with the given string

Note :in the second selector, there’s an extra whitespace before “mike” which accounts for IE’s handling of having multiple classes (e.g. class=”mikebox mike-1″).