CSS Attribute Selectors
CSS Attribute Selectors
CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both.
The different types of attribute selectors are described below.
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specific
attribute.
The following example selects all <a> elements with a target attribute:
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specific
attribute with an exact value.
The following example selects all <a> elements with a target="_blank" attribute:
CSS [attribute~="value"] Selector
The
[attribute~="value"] selector is used to select elements with an attribute
value containing a specific word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".
CSS [attribute|="value"] Selector
The [attribute|="value"] selector
is used to select elements with the specific attribute, whose value can be
exactly the specific value, or start with the specific value followed by a
hyphen (-).
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen ( - ), like class="top-text".
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":
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":
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":
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;
}
Try it Yourself »
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 specific attribute, whose value can be exactly the specific value, or start with the specific value followed by a hyphen (-) |
| [attribute^=value] | Select elements with the specific attribute, whose value starts with a specific value |
| [attribute$=value] | Select elements whose attribute value ends with a specific value |
| [attribute*=value] | Select elements whose attribute value contains a specific value |
