The CSS attribute selector applies to elements with specific attributes. There are four ways you can define an attribute selector.
[attribute] matches if the element has the specific attribute.
This property matches on every anchor tag with a title attribute:
a[title] {
color : blue ;
}
[attribute=value] matches if the element has the attribute with a specific value.
This property matches on every link that points to the Web Design / HTML home page:
a[href=http://webdesign.about.com/] {
font-weight : bold ;
}
[attribute~=value] matches if the element has an attribute with a space separated items that matches the value.
This property matches on every link with a title with the word "Web" in it:
a[title~=Web] {
background-color : yellow ;
}
[attribute|=value] matches if the element has an attribute with a hyphen separated item that matches the value.
This property matches if the lang attribute has "fr" (or French) in it:
[lang|=fr] {
background-color : grey ;
}
Be sure to test this selector when you plan to use it. Internet Explorer 6 and lower do not support this selector.
