Andrea's Blogger Templates

For example, when you hover over an element with a title attribute, most browsers will display a tooltip. You can use this behavior to expand the meaning of things such as acronyms and abbreviations:

However, there is no way to tell that this extra information exists without hovering over the element. To get around this problem, you can use the attribute selector to style acronym elements with titles differently from other elements—in this case, by giving them a dotted bottom border. You can provide more contextual information by changing the cursor from a pointer to a question mark when the cursor hovers over the element, indicating that this element is different from most.

In addition to styling an element based on the existence of an attribute, you can apply styles based on a particular value. For instance, sites that are linked to using a rel attribute of nofollow gain no added ranking benefit from Google. The following rule displays an image next to such links, possibly as a way of showing disapproval of the target site:

All modern browsers including IE 7 support these selectors. However, because IE 6 doesn’t support attribute selectors, you could potentially use them to apply one style to IE 6 and a different style to more capable browsers. For instance, Andy Clarke makes use of this technique by presenting black and white version of his site to IE 6 (see Figure 2-3) and a color one to all other browsers (see Figure 2-4).

Some attributes can have more than one value, separated by spaces. The attribute selector allows you to target an element based on one of those values. For instance, the XFN microformat allows you to define the relationship you have with a site by adding keywords to the rel attribute of an anchor link. So I can say that a particular  site belongs to a work colleague of mine by adding the co-worker keyword to the links in my blogroll. I can then show readers that I work with that person by displaying a particular icon next to that co-worker’s name.