attr

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

A função attr() do CSS é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.

css
/* Uso Simples */
attr(data-count);
attr(title);

/* Com o tipo */
attr(src url);
attr(data-count number);
attr(data-width px);

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

Nota: A função attr() pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam content é experimental.

Sintaxe

Valores

nome-do-atributo

É o nome do atributo HTML do elemento referenciado no CSS.

<tipo-ou-unidade> Experimental

É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <tipo-ou-unidade> como um valor para determinado atributo for inválido, a expressão attr() será inválida também. Se omitida, o padrão será string. A lista de valores válidos é:

Palavra-chave Tipo Associado Comentário Valor Padrão
string <string> O valor do atributo é tratado como um CSS <string>. NÃO será reparado, e em particular os caracteres usados . An empty string.
cor Experimental <color> O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor <string> CSS válido. Os espaços do lead e trail são retirados. corAtual
url Experimental <url> The attribute value is parsed as a string that is used inside a CSS url()function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. The url about:invalid that points to a non-existent document with a generic error condition.
integer Experimental <integer> The attribute value is parsed as a CSS <integer>. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value.
number Experimental <number> The attribute value is parsed as a CSS <number>. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value.
length Experimental <length> The attribute value is parsed as a CSS <length> dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, attr()computes it to an absolute length. Leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc Experimental <length> The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, attr()computes it to an absolute length. Leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value.
angle Experimental <angle> The attribute value is parsed as a CSS <angle> dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad Experimental <angle> The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as an <angle> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time Experimental <time> The attribute value is parsed as a CSS <time> dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms Experimental <time> The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as an<time> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency Experimental <frequency> The attribute value is parsed as a CSS <frequency> dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. 0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz Experimental <frequency> The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <frequency> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% Experimental <percentage> The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <percentage>. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, attr()computes it to an absolute length. Leading and trailing spaces are stripped. 0%, or, if 0% is not a valid value for the property, the property's minimum value.
<fallback> Experimental

The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.

Sintaxe formal

<attr()> = 
attr( <attr-name> <attr-type>? , <declaration-value>? )

<attr-name> =
[ <ident-token>? '|' ]? <ident-token>

<attr-type> =
type( <syntax> ) |
string |
<attr-unit>

<syntax> =
'*' |
<syntax-component> [ <syntax-combinator> <syntax-component> ]* |
<syntax-string>

<syntax-component> =
<syntax-single-component> <syntax-multiplier>? |
'<' transform-list '>'

<syntax-combinator> =
'|'

<syntax-string> =
<string>

<syntax-single-component> =
'<' <syntax-type-name> '>' |
<ident>

<syntax-multiplier> =
'#' |
'+'

<syntax-type-name> =
angle |
color |
custom-ident |
image |
integer |
length |
length-percentage |
number |
percentage |
resolution |
string |
time |
url |
transform-function

Exemplos

HTML

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

CSS

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

Resultado

Especificações

Specification
CSS Values and Units Module Level 5
# attr-notation

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attr()
<fallback>
<type-or-unit>
Experimental
<angle>
Experimental
<color>
Experimental
<frequency>
Experimental
<integer>
Experimental
<length>
Experimental
<number>
Experimental
<percentage>
Experimental
<time>
Experimental
<url>
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.