I will start with an example

I have something like this. Same id name with different ending numbers.

#samplelist_1 { color: #fff; }
#samplelist_2 { color: #fff; }
#samplelist_3 { color: #fff; }
#samplelist_4 { color: #fff; }  

and these css are automatically generated. So I want to declare and define a css for #samplelist_.. which will affect all the #ids generally. So any #ids generated say: _15, _86 or anything like that can be styled.

Is that possible?

I will start with an example

I have something like this. Same id name with different ending numbers.

#samplelist_1 { color: #fff; }
#samplelist_2 { color: #fff; }
#samplelist_3 { color: #fff; }
#samplelist_4 { color: #fff; }  

and these css are automatically generated. So I want to declare and define a css for #samplelist_.. which will affect all the #ids generally. So any #ids generated say: _15, _86 or anything like that can be styled.

Is that possible?

• javascript
• html
• css

• It would be far easier to give the elements a class="samplelist" and place .samplelist { color: #fff; } in the .css – Gerald Schneider Commented Oct 18, 2012 at 7:05
• Don't worry it will work – Dipak Commented Oct 18, 2012 at 7:06

2 Answers 2

You can use the attribute starts-with selector:

[id^="samplelist_"] {
    color: white;
}

Better yet, give them a class.

Don't generate such redundant styles, instead use class to apply same style to multiple element at once. Thus, eliminating the need to go look for such stupid solution on first place.

If not going for cross-browser patible CSS then you can do something like

[id^="samplelist_"] {
    color: #FFF;
}

Let me explain this selector in detail

• [id]: means it is going to match the id attribute of the element
• ^=: means if the value starts with ....

Combined it says "if id starts with samplelist_" then apply this style.