Document Links Styled with CSS Attribute Selectors

With CSS3 gaining popularity so are CSS attribute selectors. CSS attribute selectors have been around for some time however CSS3 adds more selectors to the mix bringing new light to subject. Increased browser support, with nearly every major browser currently supporting attribute selectors (Internet Explorer 6 still struggles), has also added to the popularity.

So what benefit do CSS attribute selectors have to adding style to document links? CSS attribute selectors allow you to quickly and easily add styles to document links while keeping your code clean and clutter free. Ultimately, the more attractive looking your links are the more clicks they will receive.

PDF Hyperlink Example

HTML Code

<a href="#.pdf" title="PDF File Link">PDF File</a>

CSS Code

a[href$=".pdf"] {
background: url(acrobat.jpg) no-repeat left center;
padding-left: 20px;
}

Output

PDF File

Breaking Down the Attribute Selector

You start your CSS just as if your were to style any other hyperlink. Directly following the a element comes the attribute selector, in this case [href$=".pdf"]. The attribute selector will always be wrapped in [] brackets and will always sit right next to the element to which it applies to without any spaces in-between the two.

Within the [] brackets the href attribute is declared as we are specifically targeting hyperlinks. Next we insert the $= selector, which specifies that we only want to target hyperlinks ending with the file format value to follow. For this example we are using a PDF document making the value .pdf, which is wrapped in "" quotations.

To target any other type of document just change the value to what ever file extension you wish. As an example, to target Microsoft Word documents just change the .pdf value to .doc.

Taking It a Step Further

Chris Coyier from CSS-Tricks has put together and outstanding resource on CSS attribute selectors in his article “The Skinny on CSS Attribute Selectors”. To learn the full potential of CSS attribute selectors this article is a must read as it does a great job of breaking them down for you.

If you are worried about the lack of support for Internet Explorer 6 you can, with a some additional work, use CSS attribute selectors via jQuery. Zac Gordon has written a great tutorial, “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery”, on how to do so.

Adding an icon to your document links is a great way to quickly draw more attention to the link. InstantShift has put together an article packed full of icons. If you would like some to use on your website check out the article at “75 Free Useful Icon Sets for Web Designers and Developers”.

from letscountthedays