---
title: attr
slug: Web/CSS/attr()
translation_of: Web/CSS/attr()
---
<p>{{ CSSRef() }}</p>

<h2 id="Resumen">Resumen</h2>

<p>La función <code>attr()</code> de <a href="/en-US/docs/Web/CSS">CSS</a> se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.</p>

<p>La función <code>attr()</code> de <a href="/en-US/docs/Web/CSS">CSS</a> se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox notranslate"><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Sintaxis formal</a>: attr( attribute-name &lt;type-or-unit&gt;? [, &lt;fallback&gt; ]? )
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>attribute-name</code></dt>
 <dd>Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.</dd>
 <dt><code>&lt;type-</code>or-unit&gt;</dt>
 <dd>Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <code>&lt;type-or-unit&gt;</code> como valor del atributo especificado no es válido, la expresión <code>attr()</code> también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son:
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Keyword</th>
    <th scope="col">Associated type</th>
    <th scope="col">Comment</th>
    <th scope="col">Default value</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>string</code></td>
    <td>{{cssxref("&lt;string&gt;")}}</td>
    <td>El valor del atributo es tratado como una {{cssxref("&lt;string&gt;")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.</td>
    <td>Cadena vacía</td>
   </tr>
   <tr>
    <td><code>color</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;color&gt;")}}</td>
    <td>El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("&lt;string&gt;")}} de CSS.<br>
     Los espacios iniciales y finales son eliminados.</td>
    <td><code>currentColor</code></td>
   </tr>
   <tr>
    <td><code>url</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;uri&gt;") }}</td>
    <td>El valor del atributo es tratado como una cadena que se usa en una función <code>url()</code> de CSS.<br>
     URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.</td>
    <td>La url <code>about:invalid</code> que apunta a un documento inexistente con una condición de error genérico.</td>
   </tr>
   <tr>
    <td><code>integer</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;integer&gt;")}}</td>
    <td>El valor del atributo es tratado como un {{cssxref("&lt;integer&gt;")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.<br>
     Los espacios iniciales y finales son eliminados.</td>
    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>number</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;number&gt;")}}</td>
    <td>El valor del atributo es tratado como {{cssxref("&lt;number&gt;")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.<br>
     Los espacios iniciales y finales son eliminados.</td>
    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>length</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;length&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;length&gt;")}} dimension, that is including the unit (e.g. <code>12.5em</code>). 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.<br>
     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;length&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;length&gt;")}} 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.<br>
     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>angle</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;angle&gt;") }}</td>
    <td>The attribute value is parsed as a CSS {{ cssxref("&lt;angle&gt;") }} dimension, that is including the unit (e.g. <code>30.5deg</code>). 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.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td>
    <td>{{ cssxref("&lt;angle&gt;") }}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{ cssxref("&lt;angle&gt;") }} 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.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>time</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;time&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;time&gt;")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). 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.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;time&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("&lt;time&gt;")}} 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.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>frequency</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;frequency&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;frequency&gt;")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). 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.</td>
    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;frequency&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;frequency&gt;")}} 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.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
   <tr>
    <td><code>%</code> {{ experimental_inline() }}</td>
    <td>{{cssxref("&lt;percentage&gt;")}}</td>
    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;percentage&gt;")}}. 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.<br>
     If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
     Leading and trailing spaces are stripped.</td>
    <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><code>&lt;fallback&gt;</code></dt>
 <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: css notranslate">p::before {
  content:attr(data-foo) " ";
}
</pre>

<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
</pre>

<h3 id="Result">Result</h3>

<p>{{ EmbedLiveSample("Examples", '100%', '80') }}</p>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.</td>
  </tr>
  <tr style="vertical-align: top;">
   <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td>
   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
   <td style="vertical-align: top;">Limited to the {{ cssxref("content") }} property; always return a {{cssxref("&lt;string&gt;")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.0</td>
   <td>{{ CompatGeckoDesktop(1.0) }}</td>
   <td>8</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Usage in other properties than {{cssxref("content")}} and with non-string values  {{ experimental_inline() }}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}} (see {{bug("435426")}})</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1</td>
   <td>{{ CompatGeckoMobile(1.0) }}</td>
   <td>8</td>
   <td>10.0</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>Usage in other properties than {{cssxref("content")}}and with non-string values  {{ experimental_inline() }}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatNo()}} (see {{bug("435426")}})</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>