Overview

Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value.

Selector(1) | Matched element | Selects elements… | CSS Version –: | — | — | :–: [attr] | <div attr> | With attribute attr | 2 [attr='val'] | <div attr="val"> | Where attribute attr has value val | 2 [attr~='val'] | <div attr="val val2 val3"> | Where val appears in thewhitespace-separated list of attr | 2 [attr^='val'] | <div attr="val1 val2"> | Where attr’s value begins with val | 3 [attr$='val'] | <div attr="sth aval"> | Where the attr’s value ends with val | 3 [attr*='val'] | <div attr="somevalhere"> | Where attr contains val anywhere | 3 [attr|=‘val’] | <div attr="val-sth etc"> | Where attr’s value is exactly val,or starts with val and immediatelyfollowed by \- (U+002D) |2 [attr=‘val’ i] | <div attr=“val”> | Where attr has value val,ignoring val’s letter casing. | 4(2)

Notes:

1. The attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may also work, but it’s not valid according to the CSS standard, and is discouraged.
2. There is no single, integrated CSS4 specification, because it is split into separate modules. However, there are “level 4” modules. See browser support.

Details

[attribute]

Selects elements with the given attribute.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Live Demo on JSBin

[attribute="value"]

Selects elements with the given attribute and value.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Live Demo on JSBin

[attribute*="value"]

Selects elements with the given attribute and value where the given attribute contains the given value anywhere (as a substring).

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

Live Demo on JSBin

[attribute~="value"]

Selects elements with the given attribute and value where the given value appears in a whitespace-separated list.

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

Live Demo on JSBin

[attribute^="value"]

Selects elements with the given attribute and value where the given attribute begins with the value.

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

Live Demo on JSBin

[attribute$="value"]

Selects elements with the given attribute and value where the given attribute ends with the given value.

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

Live Demo on JSBin

[attribute|="value"]

Selects elements with a given attribute and value where the attribute’s value is exactly the given value or is exactly the given value followed by \- (U+002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

Live Demo on JSBin

[attribute="value" i]

Selects elements with a given attribute and value where the attribute’s value can be represented as Value, VALUE, vAlUe or any other case-insensitive possibility.

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

Live Demo on JSBin

Specificity of attribute selectors

0-1-0

Same as class selector and pseudoclass.

*[type=checkbox] // 0-1-0

Note that this means an attribute selector can be used to select an element by its ID at a lower level of specificity than if it was selected with an ID selector: [id="my-ID"] targets the same element as #my-ID but with lower specificity.

See the Syntax Section for more details.