Attribute selectors are a part of both CSS 2.1 and CSS 3.0 and this tutorial will show you how to use these powerful design aids.
If they are that helpful then why isn’t their use more widespread, you may ask? Two words: Internet Explorer. Although they have almost 100% support in IE7 they have only patchy support in IE6. However, IE6 has one foot in the grave and anyway, depending on your reason for using them, it’s easy enough to use conditional comments to find another solution for IE6 or use the JavaScript linked to at the end of this article.
CSS 2.1 attribute selectors
Firstly, in XHMTL and HTML an attribute is a class, id, style or title. So it would be possible, for instance, to give a paragraph a yellow background that had a class called highlight, with the following code:
p[class] {
background : #ffffcc;
}
p[class=highlight] {
background : #ffffcc;
}
The top code means that by matching the p selector to any class attribute then that paragraph background will be a light yellow, while the second example makes sure that only the class entitled highlight has a different background.
I think this is fairly simple to understand now lets try something a little more complex.
What happens if the title has two or more words and with white space between them such as “highlight this” ?
The previous code won’t work so you’ll need to use slightly different CSS. Notice the inclusion of the ~ character:
p[title~=highlight] {
background : #ffffcc;
}
Lets look at another example of how this could be used.
You have a link which uses the title attribute with text that reads “This link goes to an important page”. In order to give that link a different background you would use the following code:
a[title~=important] {
background : #ffffcc;
}
So every link in your page with the word important somewhere in the title would be affected.
As this article is a complete guide to attribute selectors I’ll cover a little used case, that for targeting particular languages in the page.
p[lang|=en] {
background : #ffffcc;
}
This matches the language subcodes specified by the lang attribute which in XHTML is xml:en with the abbreviation changing depending on the language used.
It should be noted that multiple attribute selectors can be used on the same line if you need to pinpoint text.
p[class=highlight] a[title~=important] {
background : #ffffcc;
}
The above CSS would highlight the link with important in the title if it is in the paragraph with the class called highlight.
Okay, the above examples aren’t exactly that radical as much of the above could be achieved by simple class selectors, but in CSS 3.0 matters get more interesting.
CSS 3.0 attribute selectors
So if CSS 2.1 hasn’t flipped your mind lets move on to the next, more intricate level.
Here’s our first code example that gives a special background to all links in the document that point to a PDF:
a[href$=’.pdf’] {
background : #ffffcc;
}
The syntax is almost identical to 2.1 but notice the inclusion of the dollar sign which needs to equal the suffix of the file name.
As you can appreciate, changing the pdf to doc or txt would mean that different types documents are affected:
a[href$=’.doc] {
background : #00ffff;
}
a[href$=’.txt’] {
background : #ff00ff;
}
Changing $ to ^ means changing the end to the beginning while * specifies that it contains the value.
Lets say you wanted to highlight a link in the page that went to a secure https connection then you would use the version below as that is for the beginning of the URL rather than the end.
a[href^=’https’] {
background : #ffff00;
}
This would give a background colour to a link that had paypal somewhere in the URL:
a[href*=’paypal’] {
background : #ffff00;
}
The methods above are ideal for placing different icons next to different file types.
As I noted in the introduction support for this CSS is very poor in IE6 and not quite complete in IE7 (although very good). Some assistance comes from the jQuery plugin SuperSelectorswhich allows IE support for all CSS 2.1 selectors.