Using CSS selectors to show hyperlink cues

I fail at CSS. I was trying to learn how to apply some CSS rules to links on this site so it will show that friendly little “this link will open in a new window” icon whenever there is a hyperlink with the attribute target=”_blank”, and well, this is my story.

Ask the CSS Guy (<-- Look, an icon indicating this link will pop up in a new window! I hope.) has a great article on showing hyperlink cues with CSS, so you can indicate to readers whether the link is a popup, external link (new window), or a download of a certain file type.

I figured out how to get the external link one working, but was having trouble with indicators where the hyperlink leads to a file download. Ask the CSS Guy’s verbatim examples simply didn’t work, or appear valid CSS according to Visual Studio and the fact that no icon displayed next to my links. However, Brian Wilson's excellent and thorough overview of the Selector specification helped me fully understand the proper syntax and options available. And voilà, CSS that actually works.

a[target="_blank"]{
    background: url(images/ExternalLink.gif) right top no-repeat;
    padding-right: 14px;
    white-space: nowrap;
} 

a[href$=".zip"]{
    background: url(images/zip.gif) right center no-repeat;
    padding-right: 14px;
    white-space: nowrap;
} 

The above CSS applied to a basic link, a link with attribute target=”_blank” and a link with href=”somefile.zip” are displayed as shown below.