Sometimes our blog often provides some resources for others to download, but in PJBlog, all download links are represented by only one icon. With the new CSS3 attribute selector, this new technology can display different icons according to different types of downloaded files.
What we are going to use here is
E [att$=value]{…}
It means to select all elements E ending with value. Then we can write like this:
a[href$='.torrent'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_torrent.gif) no-repeat center right;
}
a[href$='.vcard'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_vcard.gif) no-repeat center right;
}
a[href$='.exe'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_exe.gif) no-repeat center right;
}
a[href$='.dmg'], a[href$='.app'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_dmg.gif) no-repeat center right;
}