attr
====

Resumen
-------

La función `attr()` de CSS 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.

La función `attr()` de CSS se puede usar con cualquier propiedad de CSS. 
Experimental

Síntaxis
--------
```

Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
```

### Valores

`attribute-name`

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 `content` es 
Experimental
.

`<type-or-unit>`

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 `<type-or-unit>` como valor del atributo especificado no es válido, la expresión `attr()` también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son:

| Keyword | Associated type | Comment | Default value |
| --- | --- | --- | --- |
| `string` | `<string>` (en-US) | El valor del atributo es tratado como una `<string>` (en-US) 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. | Cadena vacía |
| `color` 
Experimental
 | `<color>` | 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 `<string>` (en-US) de CSS. Los espacios iniciales y finales son eliminados. | `currentColor` |
| `url` 
Experimental
 | `<uri>()` (en-US) | El valor del atributo es tratado como una cadena que se usa en una función `url()` de CSS. URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados. | La url `about:invalid` que apunta a un documento inexistente con una condición de error genérico. |
| `integer` 
Experimental
 | `<integer>` | El valor del atributo es tratado como un `<integer>` 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. Los espacios iniciales y finales son eliminados. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
| `number` 
Experimental
 | `<number>` | El valor del atributo es tratado como `<number>`. 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. Los espacios iniciales y finales son eliminados. | `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>`

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>`.

Examples
--------


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



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

### Result

Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.