Selectors

Doing a bit of research, I discovered that the attribute matching that I mentioned before is actually part of CSS selectors. I have read about selectors in various contexts and each one uses them differently, but essentially, it is a way of specifying which elements certain styles will match. For example, the most common use of selectors are the class attribute (using the .class notation for describing the style). They also include pseudo-elements such as :hover, :first-letter and others. As for the matching of attributes, this should give you an idea:

a[href^="http:"] { 
    background-image: url(aoutside.gif);
    background-position: right center;
    background-repeat: no-repeat; 
    padding-right: 10px; 
    margin-right:1px;
}

But you also don’t want to catch any links that might start with http: but link to your own pages. So you can filter out a little further to reverse any internal links:

a[href^="http://www.yoursite.com/"] {
    background: none;
    padding-right: 0px; 
    margin-right: 0px; 
}

As it would turn out, this is an element of CSS3 - so I guess I can’t blame IE and Opera for not supporting it. For more information on CSS3 selectors, read the W3C candidate recommendation. I must say that I am pretty excited about the type of thing that can be possible with this version of CSS.

Update: July 19, 2004 21:06 I updated the CSS above (top example) so that it would hopefully fit on my page a bit better, it will still works the same.