attr() CSS

Функция attr() используется для извлечения значения атрибута выбранного элемента и использования его в таблице стилей.

Он также может быть использован для псевдоэлементов, и в этом случае возвращается значение атрибута в исходном элементе псевдоэлемента.

Функция **`attr()`** используется для извлечения значения атрибута выбранного элемента и использования его в таблице стилей. Он также может быть использован для псевдоэлементов, и в этом случае возвращается значение атрибута в исходном элементе псевдоэлемента.
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Values and Units Module Level 3](https://drafts.csswg.org/css-values-3/#attr-notation) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/generate.html#x18)
Поддержка браузерами:

Базовая поддержка:

Can I Use css-gencontent? Data on support for the css-gencontent feature across the major browsers from caniuse.com.

Расширенная поддержка:

Can I Use css3-attr? Data on support for the css3-attr feature across the major browsers from caniuse.com.

Поддержка браузерами:
Базовая поддержка: <p class="ciu_embed" data-feature="css-gencontent" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-gencontent">Can I Use css-gencontent?</a> Data on support for the css-gencontent feature across the major browsers from caniuse.com. </p> Расширенная поддержка: <p class="ciu_embed" data-feature="css3-attr" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css3-attr">Can I Use css3-attr?</a> Data on support for the css3-attr feature across the major browsers from caniuse.com. </p>

Синтаксис

/* Simple usage */
attr(data-count);
attr(title);

/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);

/* With fallback */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');

Синтаксис

/* Simple usage */ attr(data-count); attr(title); /* With type */ attr(src url); attr(data-count number); attr(data-width px); /* With fallback */ attr(data-count number, 0); attr(src url, ''); attr(data-width px, inherit); attr(data-something, 'default');

Примеры

HTML

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

CSS

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

Примеры

HTML <p data-foo="hello">world</p> CSS p::before { content: attr(data-foo) " "; }

Содержание

  • Синтаксис
      /* Simple usage */ attr(data-count); attr(title); /* With type */ attr(src url); attr(data-count number); attr(data-width px); /* With fallback */ attr(data-count number, 0); attr(src url, ''); attr(data-width px, inherit); attr(data-something, 'default');
  • Значения
    • Примеры
        HTML <p data-foo="hello">world</p> CSS p::before { content: attr(data-foo) " "; }

    В начало