attr()

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

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

Демо

Синтаксис

/* Пример простого использования */
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.

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

Пример

HTMLCSSРезультат

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

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

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

• CSS Values and Units Module Level 5

Ссылки

• MDN CSS attr()

Комментарии