HTML and CSS Reference
In-Depth Information
•
[att~=value]
The attribute's value needs to be a whitespace separated list of words
(for example, class=”title featured home”), and one of the words is
exactly the specified value.
•
[att|=value]
The attribute's value is exactly “value” or starts with the word “value”
and is immediately followed by “-”, so it would be “value-”.
•
[att^=value]
The attribute's value starts with the specified value.
•
[att$=value]
The attribute's value ends with the specified value.
•
[att*=value]
The attribute's value contains the specified value.
For example, if you want to change the background color of all the
div
elements that are posts on your blog, you can use the an attribute selector
that targets every
div
whose
class
attribute starts with “post-”
:
div[class*="post"]
{
background-color: #333;
}
This will match all the
div
elements whose class attribute contains the
words “posts”, in any position.
Another useful usage of attribute selectors is to target di
"
erent types of
input
elements
.
For example, if you want your text inputs to have a
di
"
erent width from the others, you can use a simple attribute selector:
