The Common Attribute-Value selector targets an element based on common characters in an attribute's value. It is also referred to as the Particular Attribute selector.
General Syntax for the Common Attribute-Value Selector
element[attr|="val"] { declarations... }
This selector is not supported in Windows IE 6 or below.
This selector matches any element whose attr attribute equals val or begins with val-.
The preceding statement might be a little confusing, so we'll dive right into some examples to clarify the point.
The most common use of the common attribute-value selector is to match language values, as demonstrated below:
Example Style sheet
p[lang|="en"] { font-weight: bold; }
This rule will target P tags that include the lang attribute with a value that exactly
matches en, or starts with en-.
Example Markup
<p lang="en">English: Hello!</p>
<p lang="fr">French: Bonjour!</p>
<p lang="en-us">American: Hi!</p>
<p lang="en-cockney">Cockney: 'ellowh!</p>
<p lang="x-klingon">Klingon: NUQNEH - NOOKNEHH!</p>
<p lang="en-au">Aussie: G'day Mate!</p>Rendered Example
English: Hello!
French: Bonjour!
American: Hi!
Cockney: 'ellowh!
Klingon: NUQNEH - NOOKNEHH!
Aussie: G'day Mate!
In general, the common attribute-value selector can be used for any attribute and
its values. Here's an example where we have a series of logo images on a page.
For logos, the alt attribute value begins with logo-, or is simply logo.
Non-logo images include other descriptions that do not begin with logo-.
We want to draw a thick red border around any logo images, but not around non-logo images.
Here's how we would do this using the common attribute-value selector:
Example Style sheet
img[alt|="logo"] { border: red 5px solid; }
Example Markup
<img src="images/logo-QT.jpg" alt="logo-Quicktime" />
<img src="images/logo-reader.gif" alt="logo" />
<img src="images/logo-realPlayer.gif" alt="logo-Player" />
<img src="images/logo-windmill.gif" alt="logoffWindmill" />
Rendered Example
Although the ALT attribute for the windmill image begins with "logo", it does not get targeted by our rule because it neither matches exactly with "logo", nor does it begin with "logo-".
As you can see, the rule targets only those images with ALT attributes beginning with logo-, or is equal to logo, just as we intended.