CSS style #elements[1-10]

Question

If I had 5 divs with ids "element1", "element2", etc..., is there a way to style an array of elements with something like:

#elements[1-10]{
 position:relative;
}

I know you guys probably think I'm nuts, but I'm dealing with some code that is auto generated and I would have to edit the core files of this cms which I don't want to do in case client upgrades in future.

With that said, it is out of the question for me to change the IDs manually to a class.

Answer 1

There isn't a pure css method to do it. You are better off using parent child selectors.

Answer 2

I think there's no arrays in CSS. Have you tried considering jQuery?

Answer 3

If at all possible, give all those elements a shared class (e.g., class="element"). You can have both an id and a class attribute and use then in conjunction, so you can leave the auto-generated IDs alone and add your own class for use in styling.

If that's not possible, your only option is to use

#element1, #element2, #element3 {
    position: relative;
}

Answer 4

You won't be able to do this with CSS but you'll be able to do it with JavaScript (I recommend jQuery.)

Try:

var lb = 1;
var ub = 10;
for (var i = lb; i <= ub; i++)
     $("#element" + i).css(*set your css here*);

http://jquery.com/

I'm not sure if you can add additional script elements, but this is just something to consider.

Answer 5

This works in many modern browsers... except IE:

<style type="text/css">
  p[id*=elements] {
    color: #F00;
  }
</style>

HTML

<p id="elements1">Elements 1</p>
<p id="elements2">Elements 2</p>
<p id="elements3">Elements 3</p>
<p id="elements4">Elements 4</p>
<p id="elements5">Elements 5</p>

But there's - of what I know - no way of limiting it.