The CSS attribute selector matches elements based on the presence or value of a given attribute.
/* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; }
[attr]
[attr=value]
[attr~=value]
[attr|=value]
-
(U+002D). It is often used for language subcode matches.[attr^=value]
[attr$=value]
[attr*=value]
[attr operator value i]
i
(or I
) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).[attr operator value s]
s
(or S
) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).a { color: blue; } /* Internal links, beginning with "#" */ a[href^="#"] { background-color: gold; } /* Links with "example" anywhere in the URL */ a[href*="example"] { background-color: silver; } /* Links with "insensitive" anywhere in the URL, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* Links that end in ".org" */ a[href$=".org"] { color: red; }
<ul> <li><a href="#internal">Internal link</a></li> <li><a href="http://example.com">Example link</a></li> <li><a href="#InSensitive">Insensitive internal link</a></li> <li><a href="http://example.org">Example org link</a></li> </ul>
/* All divs with a `lang` attribute are bold. */ div[lang] { font-weight: bold; } /* All divs in US English are blue. */ div[lang~="en-us"] { color: blue; } /* All divs in Portuguese are green. */ div[lang="pt"] { color: green; } /* All divs in Chinese are red, whether simplified (zh-CN) or traditional (zh-TW). */ div[lang|="zh"] { color: red; } /* All divs with a Traditional Chinese `data-lang` are purple. */ /* Note: You could also use hyphenated attributes without double quotes */ div[data-lang="zh-TW"] { color: purple; }
<div lang="en-us en-gb en-au en-nz">Hello World!</div> <div lang="pt">Olá Mundo!</div> <div lang="zh-CN">世界您好!</div> <div lang="zh-TW">世界您好!</div> <div data-lang="zh-TW">?世界您好!</div>
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The HTML specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input>
element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier.
/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="A" s] { list-style-type: upper-alpha; background: lime; }
<ol type="A"> <li>Example list</li> </ol>
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'attribute selectors' in that specification. | Working Draft | Adds modifier for ASCII case-sensitive and 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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 7 | 9 | 3 |
Case-insensitive modifier (i ) |
49 | No | 47 | No | 36 | 9 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
Case-insensitive modifier (i ) |
49 | 49 | No | 47 | Yes | Yes | 5.0 |
attr()
Document.querySelector()
, DocumentFragment.querySelector()
, or Element.querySelector()
Document.querySelectorAll()
, DocumentFragment.querySelectorAll()
, or Element.querySelectorAll()
ParentNode
mixin; see ParentNode.querySelector()
and ParentNode.querySelectorAll()
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors