October 18, 2012

General CSS for #id ending with numbers

Question by Rahul TS

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.

Please let me know, if the explaination make sense

Thanks in advance.
Rahul TS

Answer by Blender

You can use the attribute starts-with selector:

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

Better yet, give them a class.

Answer by Starx

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!