Attribute selectors

  • Revision slug: Web/CSS/Attribute_selectors
  • Revision title: Attribute selectors
  • Revision id: 423901
  • Created:
  • Creator: zajac
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

Attribute selectors select an element using the presence of a given attribute or attribute value.

[attr]
Represents an element with an attribute name of attr.
[attr=value]
Represents an element with an attribute name of attr and whose value is exactly "value".
[attr~=value]
Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
[attr|=value]
Represents an element with an attribute name of attr its value either being exactly “val” or beginning with “val” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr^=value]
Represents an element with an attribute name of attr and whose value is the prefixed by "value".
[attr$=value]
Represents an element with an attribute name of attr and whose value is the suffixed by "value".
[attr*=value]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

Examples

<style type="text/css">
    /* All spans with a "lang" attribute are bold */
    span[lang] {font-weight:bold;}
 
    /* All spans in Portuguese are green */
    span[lang="pt"] {color:green;}

    /* All spans in US English are blue  */
    span[lang~="en-us"] {color: blue;}

    /* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
    span[lang|="zh"] {color: red;}

    /* All internal links have a gold background */
    a[href^="#"] {background-color:gold}

    /* All links to urls ending in ".cn" are red */
    a[href$=".cn"] {color: red;}

    /* All links to with "example" in the url have a grey background */
    a[href*="example"] {background-color: #CCCCCC;}
</style>

...where...

<div class="hello-example">
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

...should look like...

English: Hello World!

Portuguese: Olá Mundo!

Chinese (Simplified): 世界您好!

Chinese (Traditional): 世界您好!

Specifications

Specification Status Comment
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }}  
CSS 2.1 {{ Spec2('CSS2.1') }}  
CSS 1 {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1") }} 7 9 3
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

References

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Attribute selectors select an element using the presence of a given attribute or attribute value.</p>
<dl>
  <dt>
    [attr]</dt>
  <dd>
    Represents an element with an attribute name of attr.</dd>
  <dt>
    [attr=value]</dt>
  <dd>
    Represents an element with an attribute name of attr and whose value is exactly "value".</dd>
  <dt>
    [attr~=value]</dt>
  <dd>
    Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".</dd>
  <dt>
    [attr|=value]</dt>
  <dd>
    Represents an element with an attribute name of attr&nbsp;its value either being exactly “val” or beginning with “val” immediately followed by “-” (U+002D). It can be used for language subcode matches.</dd>
  <dt>
    [attr^=value]</dt>
  <dd>
    Represents an element with an attribute name of attr and whose value is the prefixed by "value".</dd>
  <dt>
    [attr$=value]</dt>
  <dd>
    Represents an element with an attribute name of attr and whose value is the suffixed by "value".</dd>
  <dt>
    [attr*=value]</dt>
  <dd>
    Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
&lt;style type="text/css"&gt;
    /* All spans with a "lang" attribute are bold */
    span[lang] {font-weight:bold;}
 
    /* All spans in Portuguese are green */
    span[lang="pt"] {color:green;}

    /* All spans in US English are blue  */
    span[lang~="en-us"] {color: blue;}

    /* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
    span[lang|="zh"] {color: red;}

    /* All internal links have a gold background */
    a[href^="#"] {background-color:gold}

    /* All links to urls ending in ".cn" are red */
    a[href$=".cn"] {color: red;}

    /* All links to with "example" in the url have a grey background */
    a[href*="example"] {background-color: #CCCCCC;}
&lt;/style&gt;</pre>
<p>...where...</p>
<pre class="brush: html">
&lt;div class="hello-example"&gt;
    &lt;a href="http://example.com"&gt;English:&lt;/a&gt;
    &lt;span lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/span&gt;
&lt;/div&gt;
&lt;div class="hello-example"&gt;
    &lt;a href="#portuguese"&gt;Portuguese:&lt;/a&gt;
    &lt;span lang="pt"&gt;Olá Mundo!&lt;/span&gt;
&lt;/div&gt;
&lt;div class="hello-example"&gt;
    &lt;a href="http://example.cn"&gt;Chinese (Simplified):&lt;/a&gt;
    &lt;span lang="zh-CN"&gt;世界您好!&lt;/span&gt;
&lt;/div&gt;
&lt;div class="hello-example"&gt;
    &lt;a href="http://example.cn"&gt;Chinese (Traditional):&lt;/a&gt;
    &lt;span lang="zh-TW"&gt;世界您好!&lt;/span&gt;
&lt;/div&gt;
</pre>
<p>...should look like...</p>
<p><span style="text-decoration:underline; background-color: #CCCCCC;" title="http://example.com/">English:</span> <span style="font-weight:bold; color:blue;">Hello World!</span></p>
<p><span style="text-decoration:underline; background-color: gold;" title="#portuguese">Portuguese:</span> <span style="font-weight:bold; color:green;">Olá Mundo!</span></p>
<p><span style="text-decoration:underline; background-color: #CCCCCC; color:red;" title="http://example.cn">Chinese (Simplified):</span> <span style="font-weight:bold; color:red;">世界您好!</span></p>
<p><span style="text-decoration:underline; background-color: #CCCCCC; color:red;" title="http://example.cn">Chinese (Traditional):</span> <span style="font-weight:bold; color:red;">世界您好!</span></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><a class="external" href="http://www.w3.org/TR/css3-selectors/#attribute-selectors" title="http://www.w3.org/TR/css3-selectors/#attribute-selectors">CSS Selectors Level 3</a></td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#attribute-selectors" title="http://www.w3.org/TR/CSS21/selector.html#attribute-selectors">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS1/#basic-concepts" title="http://www.w3.org/TR/CSS1/#basic-concepts">CSS 1</a></td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="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>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>7</td>
        <td>9</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for 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>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="References">References</h2>
<ul>
  <li><a href="http://dev.l-c-n.com/CSS3-selectors/browser-support.php" rel="noreferrer">CSS selectors: basic browser support</a></li>
  <li><a href="http://kimblim.dk/css-tests/selectors/" rel="noreferrer">CSS selectors and pseudo selectors browser compatibility</a></li>
</ul>
Revert to this revision