Advanced Attr Selectors
Advanced attribute selectors match elements based on partial attribute values using special operators.
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
Example Code
css[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
Example Code
css[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
Example Code
css[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
Example Code
cssinput[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]](/cssref/sel_attribute.php) | Select elements with a specific attribute | |
| [[attribute=value]](/cssref/sel_attribute_value.php) | Select elements with a specific attribute with an exact value | |
| [[attribute~=value]](/cssref/sel_attribute_value_contains.php) | Select elements with an attribute value containing a specific word | |
| [[attribute\ | =value]](/cssref/sel_attribute_value_lang.php) | Select elements with the value or value followed by hyphen |
| [[attribute^=value]](/cssref/sel_attr_begin.php) | Select elements whose value starts with a specific value | |
| [[attribute$=value]](/cssref/sel_attr_end.php) | Select elements whose value ends with a specific value | |
| [[attribute*=value]](/cssref/sel_attr_contain.php) | Select elements whose value contains a specific value |