using a css attribute selector to style a link
I set the color and added an icon for links only containing the Drupal node-type pathauto url attribute "spotlight" - in a view where both profile and spotlight page links are displayed for the same user, I want a way to bring attention to the (premium) spotlight content.
div.view a[href*="spotlight"] {color: green; padding-right: 25px; background: url('/files/spotlight_icon.png') no-repeat 180px 0px; display: block;}
the bracketed attribute selector checks the href url for the string "spotlight"
works in Firefox, Opera and IE7 (but not IE6, of course).
the following explanation is from the 11 Heavens article: Adding an icon to a headline or hyperlink
p[class~="warning"] Use ~= for any attribute that accepts a space-separated list of words, such as the class attribute. This selects paragraphs that belong to the warning class, but may also belong to other classes as well.
p[class="warning"] This selects paragraphs that only belong to the warning class, and no other class.
a[href^="http"] This is a substring matching attribute selector. It selects links that have a href attribute that begins with letters http.
a[href$="pdf"] This is a substring matching attribute selector. It selects links that have a href attribute that ends with letters pdf.
a[title*="printer-friendly"] This is a substring matching attribute selector. It selects links that have a title attribute that contains these letters in that order : printer-friendly.