attr()¶

С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме content, является экспериментальной.

Демо¶

Синтаксис¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* Пример простого использования */
attr(data-count);
attr(title);

/* С типом */
attr(src url);
attr(data-count number);
attr(data-width px);

/* с фоллбэком */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');

Значения¶

attribute-name¶

Название атрибута элемента HTML, на который ссылаемся в CSS.

Совместимость с браузерами¶

Пример¶

1

<p data-foo="hello">world</p>

1
2
3

p::before {
    content: attr(data-foo) ' ';
}

Спецификации¶

• CSS Values and Units Module Level 5

Ссылки¶

• MDN CSS attr()

Комментарии