Example
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:
-
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.
-
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>
[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>
[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>
[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>
[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>
[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>
[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>
[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>
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.
