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]
Represents an element with an attribute name of attr.
[attr=value]
Represents an element with an attribute name of attr 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 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 an element with an attribute name of attr whose value is prefixed (preceded) by value.
[attr$=value]
Represents an element with an attribute name of attr whose value is suffixed (followed) by value.
[attr*=value]
Represents an element 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).

Examples

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 that end in ".org" */
a[href$=".org"] {
  color: red;
}

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

Result

Languages

CSS

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

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>

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of 'attribute selectors' in that specification.
Working Draft Adds 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 Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 1.0 (1.7 or earlier) 7 9 3
Case-insensitive modifier 49.0 No support 47.0 (47.0) ? 36 9
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) (Yes) 1.0 (1) ? ? ? (Yes)
Case-insensitive modifier ? 49.0 No support 47.0 (47.0) ? ? 9 49.0