CSS 2 introduced a system for targeting specific attribute names or values. This may be useful for XML languages other than XHTML that may not contain class and id attributes . There are plenty of uses for attribute selectors within XHTML as well, but unfortunately, attribute selectors are not widely supported at this time.
Simple attribute selection
The broadest attribute selector targets elements with a particular attribute regardless of its value. The syntax is as follows:
element[attribute]
Example: img[title] {border: 3px red;}
Specifies that all images in the document that include a title attribute get a red border.
Exact attribute value
This selects elements based on an attribute with an exact attribute value.
element[attribute="exactvalue"]
Example: img[title="first grade"] {border: 3px red;}
Only images with the title value first grade are selected. The value must be an exact character string match.
Partial attribute value
For attributes that accept space-separated lists of values, this attribute selector allows you to look for just one of those values (rather than the whole string). The tilde (~) in the selector differentiates this selector from those that match an exact value.
element[attribute~="value"]
Example: img[title="grade"] {border: 3px red;}
This selector looks for images that contain the word grade in the list of title values. Images with the attributes title="first grade" or title="second grade" would be selected by the example selector.
Hyphen-separated attribute value
This selector is intended to target hyphen-separated values. The selector matches the value you specify, or that value followed by a hyphen. This type of attribute selector is indicated by a vertical bar (|). This will make more sense in the example.
element[attribute|="value"]
Example: *[HReflang|="es"] {color: red;}
This selector looks for all elements in which the HReflang attribute is es or begins with es-. Elements with the language of their target HRef identified as es, es-ar, or es-es would be selected (in other words, it finds all variations on the Spanish language). Selecting language subcodes is a common use for this type of attribute selector (e.g., to put language flags next to hyperlinks that link to sites and pages of a different language), but by no means its only application.