Question

I want to add a variable to a css class. Is it possile? I mean I want to do something like the following:

#box[i]
{
   padding: [i]px;
}

(for example: div which is name “box10” is supposed to get padding of 10px.)

I understand this may not be the right syntax, but I hope you can help me achieve the concept setting my class’ properties up to a variable value.

Answer 1

It’s currently not possible to use variables within CSS, however there are a number of other options available.

• The simplest option would be to create a CSS style for each of your box IDs.

• You could use JavaScript to add padding to the box, but it is not sensible to include presentation within logic. In jQuery, a loop to do this would look like (assuming your boxes are ):

  $('div[id^=box]').each(function() {
      $(this).css('padding',this.id.substr(3)+'px');
  });
  

• You could use a pre-processor tool, such as LESS to set variables in your CSS; but you would still need to specify each selector.

Setting padding based on different box ID values seems like an odd problem to have. It may be worth taking a look at whether your approach to building this page is correct. Don’t forget every ID on the page should be unique. If you wish to use the same ID on multiple elements, you should use CSS classes.

If you are trying to create a box sized based on a number of results (such as poll results), then it would be easier to use the style attribute and set a width/padding on each element rather than create an ID for every possible outcome. For example:

<div style="width:10px"></div>