How can I style .class-0, .class-1, .class-2 with a common selector?

Question

I want to style the following CSS classes; is there any short styling technique for this?

.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */

I am looking for something like:

.test-%d% { }

I want to dynamically create many test-* classes with different numbers and common styles.

Update

here is my actual situation

<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question -  1  </h1>
<div class="ui-widget-content">

 <div id="form_container-0">
        <div class="placeholder">Add your form fields here</div>
        <div style="clear: both;"></div>            
  </div>
  </div>

When user click the above button then same structure will clone and append to the end of the form

so the form will be as

  <h1 class="ui-widget-header">Question -  1  </h1>
  <div class="ui-widget-content">

  <div id="form_container-0">
   <div class="placeholder">Add your form fields here</div>   
  </div>
  <div id="form_container-1">
    <div class="placeholder">Add your form fields here</div>          
  </div>

  </div>

the css class form_container-[%d] will be created dynamically by jquery.
so i want to add style to this class.

also it would be great if you share optimised code for cloning the structure with different ID.

Please do let me know if you still have doubt.

thanks

what do you need help with? There's a syntax you have to follow for every language and in CSS that is the syntax. There's no other technique — samrap, Aug 13 '13 at 04:56
What is your actual requirement. If you can specify that, we may be able found some good solutions. — Leo T Abraham, Aug 13 '13 at 04:58
really sorry for your confusion, actually am looking for #test-%d { } formatted styles.. here %d will vary, so #test-0 { }, #test-1 {},... #test-100 {} will have common style. — Well Wisher, Aug 13 '13 at 05:00
The wording of your question isn't clear. Are you actually trying to create many more "numbered" CSS classes than the three you've shown? If so, there's no shortcut for that - you have to explicitly name every class. — Scott Leis, Aug 13 '13 at 05:01
He's looking for something that matches `.test-{NUMBER}` without specifying the actual number. Seems clear to me after the recent edit. — Wesley Murch, Aug 13 '13 at 05:02
@WesleyMurch did you understood his question before the edit? what his class holds, what he wants? anything? — Mr. Alien, Aug 13 '13 at 05:06
@WesleyMurch No, actually I just pointed that question was bad.. as it was unclear, nothing rude in that :) — Mr. Alien, Aug 13 '13 at 05:08
@WesleyMurch here we go, deleted.. if you thought it's bad, so better I delete, the only thing I said was that question is bad — Mr. Alien, Aug 13 '13 at 05:09
possible duplicate of [wildcard \* in CSS for classes](http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes) — Wesley Murch, Aug 13 '13 at 05:13
For your own sake, just add a common class name to all those elements instead of thinking this much deep. — Mr_Green, Aug 13 '13 at 05:24

score 3 · Accepted Answer · answered Aug 13 '13 at 05:00

3

You can use an attribute selector.

div[class*='test-'] {...}

answered Aug 13 '13 at 05:00

Ed W

125
3
18

Related post: http://stackoverflow.com/questions/17105684/what-does-imgclass-align-star-equals-means-in-css Would +1 if the answer was a little more fleshed out and explained why/how this works and the caveats involved. – Wesley Murch Aug 13 '13 at 05:04
1

Another related post: http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes – Ed W Aug 13 '13 at 05:05
3

If going for attribute selectors, `^=` is better suited here. – acdcjunior Aug 13 '13 at 05:37
@acdcjunior - kind of, although it wouldn't match something like `class="myclass test-1"` – Ed W Aug 13 '13 at 22:39

score 1 · Answer 2 · answered Aug 13 '13 at 05:31

I think @Ed W have the right solution BUT I have an extra idea while is not straight forward is shorter than what you have. And will help to make different testing that is waht I think you want... fiddel http://jsfiddle.net/ncubica/2sj9W/

css

.test-1, 
.test-2,
.test-3,
.test-4,
.test-5{
    color:#F60;
    display:block;
}

.test-5{
    color:blue
}

html

<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>

span five will be in blue color... so you can override the class you want to test and play with it.

Also you can use selectors like

HTML

<div>
    <span>I'm pink</span>    
    <span>I'm pink</span>    
    <span>I'm pink</span>    
    <span>I'm pink</span>    
    <span class="test-1">I'm red</span>
</div>

CSS

div > span{
    color:pink;
    display:block;
}

div > span.test-1{
    color:red;
}

and the last span will be red. I hope this help.

My two cents...

How can I style .class-0, .class-1, .class-2 with a common selector?

2 Answers2