In an HTML document, CSS Attribute Selectors select an element using the presence of a given attribute or attribute value.
There are different types of attribute selectors which are listed below.
| Selector | CSS | Description |
|---|---|---|
[attr]
|
2 | Represents an element with an attribute name of attr.
|
[attr=value]
|
2 | Represents an element with an attribute name of attr and whose value is exactly value.
|
[attr~=value]
|
2 | Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
|
[attr|=value]
|
2 | Represents an element with an attribute name of attr whose value is a hyphen-separated list of words, one of which is exactly value. It can be used for language subcode matches.
|
[attr^=value]
|
3 | Represents an element with an attribute name of attr and whose value is prefixed by value.
|
[attr$=value]
|
3 | Represents an element with an attribute name of attr and whose value is suffixed by value.
|
[attr*=value]
|
3 | Represents an element with an attribute name of attr and whose value contains at least one occurrence of string value as a substring.
|
[attr="value" i]
|
4 | Represents an element with an attribute name of attr and whose value is case-sensitive.
|
Example:
<html>
<head>
<title>Title</title>
<style type="text/css">
span[id=span] {
color:red;
}
[id=span] {
color:blue; /* Regular id attribute which works with any element */
}
</style>
</head>
<body>
<span id="span">Red text.</span>
<span>Default text.</span>
<div id="span">Blue text.</div>
</body>
</html>