The Language of Style Sheets - Pro CSS Techniques - page 21

• A partial attribute value within an element (for example, as a part of a URL)

• A particular attribute name and value combination (or part thereof ) in an element

In this section we will go into greater detail about these possibilities.

■

Note Microsoft Internet Explorer 6 and below does not support attribute selectors.

Presence of an Attribute
Consider anchor tags as an example of how simple attribute selection works. They are used
both for links and for anchors within the page. Perhaps you want to style the two differently?
You could select based on the presence of the href attribute, right? For example:

a[href] {
color: red;

}

will select all anchor ( <a> ) elements that have an href attribute. The code

a[href][title] {
color: red;

}

will select all anchor elements that have both href and title attributes. You can also use the
universal selector, * , to target all elements that have a particular attribute. The code

*[src]

will select any element with an src attribute, which may include img , embed , and others.

Exact Attribute Value
You can also select based on the value of an attribute. For example, you may want to have
links to your homepage appear differently than the rest of the links on your site:

<a href="http://ourcompany.com/" title="Our homepage">Home</a>

You could accomplish this in either of two ways:

a[title="Our homepage"] {
color: red;

}
a[href="http://ourcompany.com"] {
color: red;

}

Using this format matches attribute values exactly. In order for selection to occur, the match
must be exact, even including case.