Advanced Attribute Selectors
Advanced attribute selectors match elements based on partial attribute values using special operators.
CSS [attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements with the specific attribute, whose value starts with a specific value.
The following example selects all elements with a class attribute value that starts with "top":
Example
[class^="top"] {
background: yellow;
}Live preview
CSS [attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute value ends with a specific value.
The following example selects all elements with a class attribute value that ends with "test":
Example
[class$="test"] {
background: yellow;
}Live preview
CSS [attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute value contains a specific value.
The following example selects all elements with a class attribute value that contains "te":
Example
[class*="te"] {
background: yellow;
}Live preview
Style Form Elements With Attribute Selectors
The CSS attribute selectors can be useful for styling form elements, based on input type:
Example
input[type="text"] {
width: 150px;
padding: 6px;
margin-bottom: 10px;
background-color: pink;
}
input[type="button"] {
width: 100px;
padding: 6px;
background-color: lightgreen;
}Live preview
Tip
Visit our CSS Forms Tutorial for more examples on how to style forms with CSS.
All CSS Attribute Selectors
| Selector | Description | |
|---|---|---|
| [ attribute ] | Select elements with a specific attribute | |
| [ attribute = value ] | Select elements with a specific attribute with an exact value | |
| [ attribute ~= value ] | Select elements with an attribute value containing a specific word | |
| [ attribute | = value ] | Select elements with the value or value followed by hyphen |
| [ attribute ^= value ] | Select elements whose value starts with a specific value | |
| [ attribute $= value ] | Select elements whose value ends with a specific value | |
| [ attribute *= value ] | Select elements whose value contains a specific value |