Style links depending on some rules also called attribute selectors

In CSS3 you can style links depending on some rules also called attribute selectors. This is convenient if you have files in PDF, Zip among other and you want to display a small icon near it. This snippet shows a small icons next to your links telling the user if it is an external link, an email, a pdf, a zip or whatever you would like.

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
	content: url(icons/zip.png);
}