Section 17.4. Attribute Selectors

17.4. Attribute Selectors

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.

Browser alert: Attribute selectors are not supported by Internet Explorer Versions 6 and earlier. As of this writing, support is rumored in IE 7, but it has not been documented. Gecko-based browsers (Mozilla and Netscape 6+), Safari, and Opera 7 do support them, but represent a smaller portion of browser usage.

There are four variations on attribute selectors:

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.