WEB STANDARDS CREATIVITY

102
This will be followed by a specific rule for the individual anchors, according to their title attributes. These title attributes
add a visual tooltip for each link and also allow you to target their anchors.
a[title="Subscribe"] {
left : 0; }
a[title="Worrylist"] {
left : 104px; }
a[title="Worrycart"] {
left : 208px; }
You have already encountered the ^ symbol in previous selector examples and learned that this targets an
attribute that begins with a particular value. In contrast, the $ symbol targets an attribute that ends with a
particular value.
Worrycart
a[title$="worrycart"] {
left : 208px; }
Preview the finished result in your browser. To illustrate the anchors in position, I have added a red border to each of the
anchors in Figure 4-11 (using the outline feature of the Web Developer Toolbar for Firefox).
Figure 4-11. Showing the finished result, with anchors outlined for emphasis