mozilla

Revision 236940 of attr

  • Revision slug: CSS/attr
  • Revision title: attr
  • Revision id: 236940
  • Created:
  • Creator: Sebastianz
  • Is current revision? No
  • Comment 2 words added, 2 words removed

Revision Content

{{ CSSRef() }}

Summary

The attr() function is used to retrieve the value of an HTML element's attribute and use it in the style sheet.

 

Syntax

In CSS 2.1 the syntax for attr() is:

attr( attribute-name )
  • Where attribute-name is the name of a attribute on the element referenced in the CSS.
  • The returned value is always a string.
  • In CSS 2.1 the attr() function can only be used with the content property.

In CSS 3 the syntax is:

attr( attribute-name, [ <type> ], [ <value> ] )
  • Where attribute-name is the name of a attribute on the element referenced in the CSS.
  • The value of <type> can be any valid CSS value.
  • The third argument, <value> must be a CSS value which is valid for the property where attr() is used.
  • In CSS 3 the returned value can be any valid CSS value.
  • The attr() function can be used with any CSS property.

Examples

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

Result

hello world

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }} Added to optional parameter; can be used on all properties
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} Limited to the {{ cssxref("content") }} property

Browser Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2.0 {{ CompatGeckoDesktop("1") }} 8 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("1") }} 8 10.0 3.1

{{ languages( { "fr": "fr/CSS/attr" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>attr()</code> function is used to retrieve the value of an HTML element's attribute and use it in the style sheet.</p>
<p> </p>
<h2>Syntax</h2>
<p>In CSS 2.1 the syntax for attr() is:</p>
<pre>attr( attribute-name )
</pre>
<ul> <li>Where <code>attribute-name</code> is the name of a attribute on the element referenced in the CSS.</li> <li>The returned value is always a string.</li> <li>In CSS 2.1 the <code>attr()</code> function can only be used with the <code>content </code>property.</li>
</ul>
<p>In CSS 3 the syntax is:</p>
<pre>attr( attribute-name, [ &lt;type&gt; ], [ &lt;value&gt; ] )
</pre>
<ul> <li>Where <code>attribute-name</code> is the name of a attribute on the element referenced in the CSS.</li> <li>The value of <code>&lt;type&gt;</code> can be any valid CSS value.</li> <li>The third argument, <code>&lt;value&gt;</code> must be a CSS value which is valid for the property where attr() is used.</li> <li>In CSS 3 the returned value can be any valid CSS value.</li> <li>The <code>attr()</code> function can be used with any CSS property.</li>
</ul>
<h2>Examples</h2>
<pre class="brush: css">p:before {
    content:attr(data-foo) " ";
}
</pre>
<pre class="brush: html">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
</pre>
<h3>Result</h3>
<pre class="eval">hello world
</pre>
<h3 name="Specifications">Specifications</h3>
<table border="1" cellpadding="1" cellspacing="1" style="width: 1053px; border-style: solid; border-width: 1px; height: 75px; border-color: rgb(0,0,0);"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-values/#attr" title="http://www.w3.org/TR/css3-values/#attr">CSS Values and Units Level 3</a></td> <td>{{ Spec2('CSS3 Values') }}</td> <td>Added to optional parameter; can be used on all properties</td> </tr> <tr style="vertical-align: top;"> <td style="vertical-align: top;"><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#x18" title="http://www.w3.org/TR/CSS21/generate.html#x18">CSS Level 2 (Revision 1)</a></td> <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> <td style="vertical-align: top;">Limited to the {{ cssxref("content") }} property</td> </tr> </tbody>
</table>
<h2>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") }}</td> <td>8</td> <td>9.0</td> <td>3.1</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") }}</td> <td>8</td> <td>10.0</td> <td>3.1</td> </tr> </tbody> </table>
</div>
<p>{{ languages( { "fr": "fr/CSS/attr" } ) }}</p>
Revert to this revision