Attribute Selectors
suggest changeOverview
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.