CSS стиль #elements [1-10]

Question

Если бы у меня было 5 делений с идентификаторами "element1", "element2" и т. Д., Есть ли способ стилизовать массив элементов с чем-то вроде:

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

Я знаю вас, ребятавозможно, мне кажется, что я сумасшедший, но я имею дело с кодом, который генерируется автоматически, и мне придется редактировать основные файлы этой cms, что я не хочу делать в случае обновления клиента в будущем.

С учетом вышесказанного для меня не подлежит сомнению изменение идентификаторов вручную для класса.

Answer 1

Это работает во многих современных браузерах ... кроме 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>

Но есть - что я знаю - нет путиограничить его.

Answer 2

Я думаю, что в CSS нет массивов.Вы пытались рассмотреть jQuery ?

Answer 3

Если при все возможно, присвойте всем этим элементам общий класс (например, class="element"). Вы можете иметь атрибуты id и class и использовать их вместе, так что вы можете оставить автоматически сгенерированные идентификаторы и добавить свой собственный класс для использования в стилях.

Если это невозможно, ваш единственный вариант - использовать

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

Answer 4

Вы не сможете сделать это с помощью CSS, но вы сможете сделать это с помощью JavaScript (я рекомендую jQuery.)

Попытка:

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

http://jquery.com/

Я не уверен, что вы можете добавить дополнительные элементы скрипта, но это просто то, что нужно учитывать.

Answer 5

Нет чистого метода CSS для этого. Вам лучше использовать родительские дочерние селекторы.