Web/CSS/Attribute selectors

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;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

Syntax

[attr]

Represents elements with an attribute name of attr.

[attr=value]

Represents elements with an attribute name of attr whose value is exactly value.

[attr~=value]

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

[attr|=value]

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

[attr^=value]

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

[attr$=value]

Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

[attr*=value]

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

[attr operator value i]

Adding an 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] '

Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

Examples

Links

CSS

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 with "cAsE" anywhere in the URL, 
with matching capitalization */ 
a[href*="cAsE" s] { 
  color: pink; 
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

HTML

<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>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>

Languages

CSS

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}

/* 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;
}

HTML

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

HTML ordered lists

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.

CSS

/* 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;
}

HTML

<ol type="A">
  <li>Example list</li>
</ol>

Specifications

Specification	Status	Comment
Selectors Level 4The definition of 'attribute selectors' in that specification.	Working Draft	Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3The 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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Attribute selector ([attr=value])	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 7	Opera Full support 9	Safari Full support 3	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Case-insensitive modifier (i)	Chrome Full support 49	Edge Full support 79	Firefox Full support 47	IE No support No	Opera Full support 36	Safari Full support 9	WebView Android Full support 49	Chrome Android Full support 49	Firefox Android Full support 47	Opera Android Full support 36	Safari iOS Full support 9	Samsung Internet Android Full support 5.0
Case-sensitive modifier (s)	Chrome No support No Notes' No support No Notes' Notes' See bug 1041095.	Edge No support No Notes' No support No Notes' Notes' See bug 1041095.	Firefox Full support 66	IE No support No	Opera No support No Notes' No support No Notes' Notes' See bug 1041095.	Safari No support No	WebView Android No support No Notes' No support No Notes' Notes' See bug 1041095.	Chrome Android No support No Notes' No support No Notes' Notes' See bug 1041095.	Firefox Android Full support 66	Opera Android No support No Notes' No support No Notes' Notes' See bug 1041095.	Safari iOS No support No	Samsung Internet Android No support No Notes' No support No Notes' Notes' See bug 1041095.

Legend

Full support  

Full support

No support  

No support

See implementation notes.'

See implementation notes.

See also

• attr()
• Selecting a single element: Document.querySelector(), DocumentFragment.querySelector(), or Element.querySelector()
• Selecting all matching elements: Document.querySelectorAll(), DocumentFragment.querySelectorAll(), or Element.querySelectorAll()
• The above methods are all implemented based on the ParentNode mixin; see ParentNode.querySelector() and ParentNode.querySelectorAll()

Attribute selectors by Mozilla Contributors is licensed under CC-BY-SA 2.5.