Flash cards
Review the key moves
What is the main idea behind CSS Advanced Attribute Selectors?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
[___^="top"] {Put the learning moves in the order that makes the concept easiest to apply.
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 |