In this post i would like to explain how to apply style to a link by using file type. In our web projects we can use many type of links (External link, PDF file, ZIP file, mailto, doc file, etc…) and we can style each link by link file type without using any class or id.
Styling links by file type using CSS
Below is the style used in the demo link. In this example i have changed the icon for links using file type.
There you can see i have specified like this a[href^="http://"] to style the links which has external links so i have mentioned http:// and similarly for email a[href^="mailto:"], for pdf a[href$=".pdf"] and for a[href$=".zip"]. By using this you can style any type of link by using file type.
/* external links */
a[href^="http://"]{
padding-left: 20px;
background: url(link.png) no-repeat center left;
}
/* emails */
a[href^="mailto:"]{
padding-left: 20px;
background: url(email.png) no-repeat center left;
}
/* pdfs */
a[href$=".pdf"]{
padding-left: 20px;
background: url(pdf.png) no-repeat center left;
}
/* zip */
a[href$=".zip"]{
padding-left: 20px;
background: url(zip.png) no-repeat center left;
}
</style>
Hope you enjoy this post. If you any have suggestions or comments. please post your comments.
