Problem with CSS and Looking for your Help

[Pavan PHP]

Hi Group Members,

I have a problem with CSS and looking for your help. I can solve this problem with javascript very easily but trying to solve this with CSS.

I am looking for your inputs regarding this. Here is the problem:

I have 100 buttons in a page.

<div class='buttons'>
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
<button id='button4'>Button 4</button>
<button id='button5'>Button 5</button>
<button id='button6'>Button 6</button>
<button id='button7'>Button 7</button>
<button id='button8'>Button 8</button>
<button id='button9'>Button 9</button>
<button id='button10'>Button 10</button>
.
.
.
<button id='button100'>Button 100</button>
</div>

and I have following css definition for each button as below:

.buttons #button1 { background-image:url(images/button1.gif); }
.buttons #button2 { background-image:url(images/
button2.gif); }
.buttons #button3 { background-image:url(images/button3.gif); }
.buttons #button4 { background-image:url(images/button4.gif); }
.buttons #button5 { background-image:url(images/button5.gif); }
.buttons #button6 { background-image:url(images/button6.gif); }
.buttons #button7 { background-image:url(images/button7.gif); }
.buttons #button8 { background-image:url(images/button8.gif); }
.buttons #button9 { background-image:url(images/button9.gif); }
.buttons #button10 { background-image:url(images/button10.gif); }
.
.
.
.buttons #button100 { background-image:url(images/button100.gif); }


I am trying to define a single definition for each button as below:

.buttons button { background-image:url(images/buttonid.gif); }

where buttonid in "images/buttonid.gif" is the id attribute of the button element which is also the name of background image file for the respective button.

I am trying to define background image dynamically (assume adding a value of a variable) so that all the buttons in class ".buttons" have the respective background image.

Regards
Pavan PHP

[rafael couto]

Guess you already realized its not possible to do that with css.

[Jú Gonçalves]

You could use a sprite with all bgs for a class .button. But you must set the bg position for all 100 buttons manually.

You cannot do it exactly the way you want with css only.

[Joe Thomas]

When browsers start to support attr() inside of calc() values, this
will be doable.

See
http://www.w3.org/TR/css3-values/#calc-notation
and
http://caniuse.com/#feat=calc