The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

26 Chapter 3

Just like the Beginning Selector, you can use this selector to provide

visual clarity to hyperlinks. But this time, instead of using the protocols at

the beginning of the href attribute, you use the file types at the end. The

code here shows rules for many popular file-type extensions:

a[href$='.pdf'] { background-image: url('pdf.svg'); }

a[href$='.doc'] { background-image: url('word.svg'); }

a[href$='.rss'] { background-image: url('feed.svg'); }

Figure 3-3 shows examples of these rules applied.

Figure 3-3: Link icons applied with the Ending Selector

To achieve this effect using CSS2, you would have to apply set class

values to the markup (class="pdf", for example). The advantage of using

the Ending Selector is that links to files can be detected automatically,

without requiring you to apply a particular class. The disadvantage is that

sometimes the file-type suffix is not at the end of the URI. But the next

new selector helps get around that situation.

Arbitrary Substring Attribute Value Selector

The final new attribute selector—which I call the Arbitrary Selector—works in

the same way as the previous two, but it searches for the provided substring

value anywhere inside the specified attribute string. This selector uses the

asterisk (*) character. Here’s the new syntax:

E[attr*='value'] {...}

To demonstrate this selector, I’ll once again use the same markup that

I used for the Beginning and Ending Selectors, only this time applying the

Arbitrary Selector:

a[title*='image'] {...}

This rule is applied to the first and second list items because they both

contain the text string image in their title attributes, even though the string

appears in a different position in each example.