Attribute selectors
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 can be exactly “value” or can begin with “value” 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 first value is prefixed by "value".
[attr$=value]
- Represents an element with an attribute name of attr and whose last value is 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.
[attr operator value i]
- Adding an
i
(orI
) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
Example
CSS
Copy Code
/* 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 spans whose first declared class begins with "main" have a yellow background */ /* Span with the class="banner main" would not be affected. */ span[class^="main"] {background-color: yellow;} /* All links to urls ending in ".cn" are red */ a[href$=".cn"] {color: red;} /* All links with "example" in the url have a grey background */ a[href*="example"] {background-color: #CCCCCC;} /* All email inputs have a blue border */ /* This matches any capitalization of "email", e.g. "email", "EMAIL", "eMaIL", etc. */ input[type="email" i] {border-color: blue;}
HTML
Copy Code
<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>
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'attribute selectors' in that specification. |
Working Draft | Added modifier for ASCII case-insensitive attribute value selection. |
Selectors Level 3 The definition of 'attribute selectors' in that specification. |
Recommendation | |
CSS Level 2 (Revision 1) The definition of 'attribute selectors' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) | 7 | 9 | 3 |
Case-insensitive modifier | 49.0 | 47.0 (47.0) | ? | ? | 9 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 1.0 (1) | ? | ? | ? | (Yes) |
Case-insensitive modifier | ? | 49.0 | 47.0 (47.0) | ? | ? | 9 | 49.0 |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/attribute_selectors