Use CSS to Style Link Types.

Ever wanted to style your links to represent the type of content it links too without having to add a class to each link? Well I’m here again to save the day with a no brainier solution. This is quick and simple so I’ll get right too it.

Say you want to have all links to PDF’s have a PDF icon next to it, letting users know they are about to have their browser stall for a few seconds as the file loads. Well all you need to do is add the following to your CSS.

a[href$=".pdf"]
{
background: url(pdf.png) no-repeat right top;
padding-right: 20px;
}


Of course you will need to make some changes to specify the location and name of your image on your server, and possibly adjust the padding so the image sits right, but this is it. Check it out working here. It uses the sub string matching attribute selector, and this is how it breaks down.

X[YZ="B"]

X = the type of selector you want to use. In this example we used the a selector, used for links.

Y = the name of the element that will contain the element you want to identify. Here we used href which specifies the location the link is pointing too.

Z = can be $ for identifying elements at the end of the string, like file extensions in this example. It can also be a ^ which is used to identify elements at the beginning of the string, like http://feed.

B = the element you are looking for. In this case it was the .PDF extension.

So the following p[title$="bar"] { background-color : lime } would search out any P tag with titles containing bar at the end and turn its background lime green. See it in action here.

Let’s try it one more time, you can see these examples in action, with some others thrown in to get you started. Say you want to style links to feeds. If your feeds are like this http://feeds.feedburner.com/blogging-tips then you will want to specify that you want to find, at the beginning of links, http://feeds. and to have it styled appropriately. Like so.

a[href^="http://feeds."]
{
background: url(rss.png) no-repeat right top;
padding-right: 20px;
}

It might seem a bit complicated, but play around with the examples and it should come to you quickly. Any questions be sure to ask them in the comments.

Written by John Leschinski from Leschinski Design
Posted on July 5th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

6