"Динамические" имена идентификаторов CSS? Как добавить их в файл CSS?

#css

Вопрос:

У меня есть идентификаторы DIV в приложении, которые генерируются динамически, с идентификатором в конце. Например: <div id="vote_score_72"> , <div id="vote_score_73"> , <div id="vote_score_74"> и так далее.

Как я могу записать этот идентификатор в файл CSS, чтобы применить к нему стиль?

1. Нужно ли им делать разные вещи для разных идентификаторов?

2. Как и любой другой идентификатор, со знаком # . … Не могли бы вы, пожалуйста, рассказать нам, что вы на самом деле пытаетесь сделать? Если это делается с помощью JavaScript, гораздо лучше иметь класс для стилей, общий для всех них, а затем использовать style свойство для применения стилей, специфичных для элемента. Если все они имеют одинаковые стили, используйте классы (Google «Классы CSS») вместо этого.

3. @ceejayoz нет, то же самое. Это приложение Ruby on Rails, которое показывает разные истории на одной странице. У каждой истории есть оценка, и оценка заключена в DIV с идентификатором истории в конце.

Ответ №1:

В дополнение к предложению о том, что вы должны использовать классы для этой функциональности (и вы должны), вы можете вместо этого использовать селектор attribute-value-begins-with (это может быть не официальное название):

 div[id^=vote_score] {
    color: #f00;
    /* and so on... */
}

Демонстрация JS Fiddle.

Отредактировано, чтобы добавить ссылку на Quirksmode.org Таблицы совместимости для расширенных селекторов атрибутов.

Ссылки:

Ответ №2:

Вы должны добавить общий класс ко всем этим элементам и использовать этот класс в вашем CSS.

Классы — лучший способ обработки общего стиля для разных элементов.

1. Понятно, допустим, я меняю идентификатор для класса. Как бы мне записать имя класса в файл CSS? Нравится .classname_changingnumber

2. Вы можете называть имя класса как угодно, хотя выбор имени, соответствующего содержимому / назначению div , имел бы смысл.

3. @FelipeCerda: нет, имя класса должно быть уникальным для всех элементов, которые вы хотите стилизовать. Затем вы можете ссылаться на это имя класса в вашем CSS