dio-v
12/19/2013 - 2:10 PM

Style Links Depending on File Format

Style Links Depending on File Format

/* 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);
}
 
/* cssreflex
The *= specifies that at least one instance of the substring "cssreflex" matches.
*/
a[href *="cssreflex"] {
  padding-right: 17px;
  background: url(icons/super-star.png) no-repeat right;
}