With CSS2 we can now use the attributes of elements to help define our styles. Before, the only attribute you could use was the "class" attribute. But now, you match any attribute an element might have to define styles for it.
There are four ways to match attributes:
- [att]
This will match the element(s) with that attribute, no matter what the attribute value is.
a[title] { color : #00f; }
All a elements with a title attribute are colored blue.
- [att=val]
This will match the element(s) with the attribute that has a value of exactly "val".
a[title="Web Design/HTML"] { color : #00f; }
All a elements with the title "Web Design/HTML" are colored blue.
- [att~=val]
This will match the element(s) with an attribute that has a space separated list of values, one of which is exactly "val".
a[rel~="help"] { color : #00f; }
All a elements with a rel attribute with "help" in it are colored blue. This would match <a rel="help index"> and <a rel="index help">
- [att|=val]
This will match the element(s) with an attribute that has a hyphen separated list of values, one of which is exactly "val".
a[lang|="en"] {color : #00f; }
All a elements with a lang attribute of en are colored blue. This would match <a lang="en">, <a lang="en-us">, and <a lang="en-australian">
Browser Support
Internet Explorer 6 and lower (Windows) and 5 and lower (Macintosh) don't support this selector. Nor does Netscape 4 or Opera 3.
