Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

01.29.2009

In this tutorial I will explain how I used jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS. Here is what an example looks like:

Selecting Links Based on File Extensions With jQuery

To select something based off of the href value of the link we are going to use the jQuery attribute filter selector that checks to see what the characters the attribute value ends with. To select a pdf with this selector would look like this:

Now any link that has a link to a pdf document gets the following CSS applied:

The problem here is that we do not want to add the class to the link, we want to add it to the list item.  Let's look at the HTML that we are working with.

<ul class="resources">
<li><a href="Week-One-HTML-and-Beyond.pdf">Week-One-HTML-and-Beyond.pdf</a></li>
<li><a href="Week-One-HTML-and-Beyond.ppt">Week-One-HTML-and-Beyond.ppt</a></li>
<li><a href="/examples/ca273/">Example files for this class</a></li>
<li><a href="http://www.alistapart.com/articles/doctype/" title="Go read the article on the ALA website">A 2002 Article from <em>A List Apart</em> on Doctypes from Jefferey Zeldman</a></li>
<li><a href="http://orderedlist.com/articles/structural-tags-in-html5" title="Read the post on Steve's Site: an Ordered List">A post from Steve Smith about Structural Tags in HTML5</a></li>
<li><a href="/cc/Basic-Anatomy-of-XHTML-Elements.png" title="See the large image used in the slideshow from class">Large illustration of the Basic Anatomy of HTML elements</a></li>
<li><a href="http://www.w3schools.com/tags/tag_meta.asp" title="Visit the W3Schools and learn more">W3Schools page on Meta Tags</a></li>
<li><a href="http://microformats.org/wiki/what-are-microformats" title="Read more at microformats.org">The Microfromats wiki page on what microformats are</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/4106" title="Operator add-on for Firefox that pulls Microformats from a page">Operator add-on for Firefox that pulls Microformats from a page</a></li>
</ul>

The list item is the parent element of the anchor tag, in the markup above.  To navigate from a child element to the parent element with jQuery is easy.

Navigating From Child to Parent Elements with jQuery .parent() Selector

Once we select the link we are going to use the .parent() selector to traverse the DOM up to the list item containing the link. Now our code looks like this:

$("li a[href$='pdf']").parent().addClass("pdf");

Notice that I also added li infront of the a selector because I don't want to accidently style any links that are not inside of list items.

Now that we have our selector for the pdf, we can easily modify it to work with other file extensions as well:

$("li a[href$='pdf']").parent().addClass("pdf");
$("li a[href$='ppt']").parent().addClass("ppt");
$("li a[href$='doc']").parent().addClass("doc");
$("li a[href$='xls']").parent().addClass("xls");

This will add the appropriate class to the appropriate list item (instead of the anchor tag).

Combining Attribute Filters to Select Images With Multiple File Extensions

When it comes to selecting and styling images, we want to be able to select any link in a list item that links to a .jpg, .gif, or  a .png file.  To do this we are going to use jQuery's ability to select or filter multiple attributes.

In practice, this looks like the following:

$("li a[href$='png'][href$='gif'][href$='jpg']").parent().addClass("picture");

This will allow us to select all the image types and add a class to the parent list item.

Determining Internal and External Links with jQuery

In the last part of this script I want to add a special class to a list item that contains a link to site besides my site (http://dabrook.org)

To accomplish this I used James Padolsey's :external extension for jQuery. You can find the extension about halfway down the page.  I won't repost his code here, so go check out his site for the code.  It is very straight forward and easy to implement.

Once you have his extension you can style external links just like this:

$("li a:external").parent().addClass("external");

The Complete Code

Here is the complete script (minus the :external extension) .

$("li a[href$='pdf']").parent().addClass("pdf");
$("li a[href$='ppt']").parent().addClass("ppt");
$("li a[href$='png'], li a[href$='gif'], li a[href$='jpg']").parent().addClass("picture");
$("li a:external").parent().addClass("external");