SELECTORS - CSS: Professional Techniques for Modern Layout - page 57

Figure 2-13: Selecting all links that contain w3.org in the URL.

h at's it: Just include an asterisk before the equal sign. No, this is not a universal selector.
Neither can you put asterisks in the value to create UNIX- or grep-style wildcards. You just
put it before the equal sign, and that means “this character sequence appears somewhere
inside the attribute value.”

As always, this can be used on any element and attribute. To return to the example of uniquely
selecting the image of your company's logo, you could write:

img[src*="mainlogo.png"]

59

h at will select any img that points to a i le named mainlogo.png , or indeed that has the
characters mainlogo.png anywhere within the src value. h us it would select both of the
following:

< img src ="/img/2010/mainlogo.png.gif" alt ="ConHugeCo Inc." />
< img src ="/img/2010/mainlogo.pngdir/big.png" alt ="ConHugeCo Inc." />

You probably shouldn't name your i les and directories that way, though. I mean, I'm just
saying.

h ere are a lot of creative ways to use this particular power. You could select any image that
happens to come from a particular directory just by selecting the part of their URLs that
corresponds to that directory. For that matter, you could style all the links into a certain area
of your site by the directory that appears in their href values.

a[href*=" / contact"] { color : maroon ;}
a[href*=" / news"] { font-weight : bold ;}