Attribute Selectors - Exact Match

To get even more specific, you can target elements that have a specific value for a certain attribute. The general syntax for the Exact Attribute selector appears below.

General Syntax for the Exact Attribute Selector

element[attr="value"] { declarations... }

This selector is not supported in Windows IE 6 or below.

The first part of the selector is the element that you want to target, while the second part of the selector is the name of the attribute, and its value enclosed in brackets.
The value of the attribute must match exactly in order for the style to be applied.

Let's illustrate this with an example. In the rule the follows, only images that include an ALT attribute with the value of "logo-Reader" will have a red border.

Example Style sheet

img[alt="logo-Reader"] { border: red 5px solid; }

Example Markup

<p>
  <img src="logo-QT.jpg"         alt="logo-Quicktime" />
  <img src="logo-reader.gif"     alt="logo-Reader" />
  <img src="logo-realPlayer.gif" alt="logo-Player" />
</p>

Rendered Example

As you can see from the markup, the Adobe Acrobat Reader® image is the only image whose ALT attribute has the "logo-Reader" value. Thus, it is the only image that has a red border.

Advanced Selectors