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