CSS3 attribute selectors

By Christopher Schmitt

Introduction

CSS attribute selectors allow us to pinpoint the values of attributes of an element and to style that element accordingly. CSS3 introduces three new selectors that can match strings against an attribute value at the beginning, the end, or anywhere within the value.

This provides powerful new ways to style elements automatically that match very specific criteria. In this article, I will put these new attribute selectors in action and create some clever CSS rules that attach icons to links based on the value of the href attribute.

There are several small examples included in this article that demonstrate the techniques discussed throughout. You can download the sample code to play with these examples on your local machine.

Inserting icons

Before we move on to the CSS selectors themselves, let’s look at a simple way to add icons before or after a link address using pseudo selectors.

Suppose we label all of our favorite links by adding a class attribute with the value "favorite" to each link:

Lorem ipsum dolor sit amet, <a href="#" class="favorite">consectetuer</a> adipiscing elit.

Here we want to identify a link as a favorite by placing a heart icon before the link text. This can easily be done using the :before pseudo-selector:

.favorite:before {
  content: url(icons/heart.png);
}

This tells the browser to place the heart.png image before every element labeled with the "favorite" class. We end up with a link, as shown in Figure 1.

Figure 1: The icon is placed before the link

We can also just as easily place the icon after the link using the :after pseudo-selector:

.favorite:after {
  content: url(icons/heart.png);
}

Adding contextual icons

Now, lets move into a trickier example. Suppose we want to identify every link to a video file by placing a film icon next to the links.

Now, we could do this by adding a class called "movie" to each relevant link and by adding a CSS rule applying to all links with that class. But this can be tedious—particularly if you have numerous links that need classifying—and it’s unnecessary.

There is already a unique identifier in the link address itself: the ".mov" file extension (or ".avi," or whatever particular extension applies to the video file type you are referring to). How can we use CSS to pick out a link address based on the extension at the end of the link?

This is where CSS selectors come in. We can use them to pick out parts of a value within an attribute. Here, we want to pick out links—anchor tags with the href attribute—that have the text ".mov" at the end:

a[href$='.mov']:after {
  content: url(icons/video.png);
}

The $= specifies that we want to match links whose hrefs end with ".mov". Once again, we’ve used the :after pseudo-selector to place the icon after the link, as shown in Figure 2.

Figure 2: Film icon is placed immediately after the link

We can use this technique to style links that point to other types of file similarly. We can add identifying icons to music files, Word documents, or PDF files, so that users can readily see what kind of file they are about to open by clicking each link they encounter on your site.

While using the :after pseudo-selector produces adequate results, if we want to be able to fine tune the position of the icon, we can just style the anchor itself:

a[href$='.mov'] {
  padding-right: 17px;
  background: url(icons/video.png) no-repeat right;
}

Here we’ve made space for the icon by adding generous padding to the right of the link; then, we’ve placed a background image to the right of the element. The result is shown in Figure 3.

Figure 3: Spacing inserted between the text and icon

Either method for placing the icon works, depending on how much positioning control you need to produce the desired results.

Note: For large files such as videos, it would be polite to include a note within the link itself indicating the file size and type, to let people know that the file the link is pointing to is rather large, and they may want to reconsider it if they have a slow Internet connection. For example:

<a href="videofile.mov">Embiggen Movie (30M, .mov format)</a>

We’ve identified links that end with a particular extension. What if we need to pick out a link that begins with a particular string? For example, suppose we want to identify all e-mail links with an icon. Recall that links to e-mail addresses are prefaced with mailto: like so:

<a href="mailto:username@example.com">contact me</a>

So, to style all links that begin with the string "mailto:", we can use the following rule:

a[href ^="mailto:"] {
  padding-right: 18px;
  background: url(icons/email.png) no-repeat right;
}

The ^= specifies that we want to match links that begin with the "mailto:" string. The result is shown in Figure 4.

Figure 4: Mail icon placed after a mailto: link

Setting icons for file extensions

You may also want to pick out links that end with one of several types of extension. Links to subscription feeds, for example, can end with .rss or .atom. You can add more than one attribute selector to a particular rule, like so:

a[href$='.rss'], a[href$='.atom'] {
  padding-right: 17px;
  background: url(icons/rss.png) no-repeat right;
}

So, the feed icon is added to both types of subscription feeds as shown in Figure 5.

Figure 5: Icon placed after links to subscription feeds

Finally, suppose that you want to pick out links that contain a string anywhere within the address. For example, what if you want to place a star next to any link that contains your username? We can use *= to match links that contain a particular string anywhere in an attribute value:

a[href *="username"] {
  padding-right: 17px;
  background: url(icons/star.png) no-repeat right;
}

So, a link to http://username.livejournal.com styles with this rule, as well as a link to http://twitter.com/username. See Figure 6.

Figure 6: Inserting an icon based on a string of characters in the attribute’s value

Summary

Attribute selectors provide a powerful tool for targeting specific types of links within an HTML document, which in turn allows you to style special types of links automatically. Attaching identifying icons to particular links enhances the usability of a Web page, as it lets users know whether they are clicking on a file, e-mail address, external link, and so forth.

Note that adding an icon is only one way to style such links. Changing the text or background color and adding attaching identifying text—e.g., adding "(pdf)" after all links to PDF files—are other ways to identify special links uniquely.

Also, note that CSS3 includes other ways to match a string within an attribute value. For more information, check out http://www.w3.org/TR/css3-selectors/#attribute-selectors/.

As for browser support, attribute selectors are supported by most browsers, including IE7+, Safari, and Opera, as is generated content with the exception being IE7. Although support for generated content should be in IE8 (which is currently in beta development at the time of this writing).

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.