Loading lesson path
Advanced attribute selectors match elements based on partial attribute values using special operators. CSS [attribute^="value"] Selector
[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":
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] Selector[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":
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Selector[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":
[class*="te"] {
background: yellow;
}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;
}CSS Forms Tutorial for more examples on how to style forms with CSS.
[ 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