Have you looked at other people’s style sheets lately? Were you baffled to find square brackets in the CSS code? If so, this article might be of interest to you.
What Does It Mean?
Curly braces should feel comfortable to any CSS author, since you cannot write any useful CSS without them. Regular parentheses should be fairly familiar, too, at least if you’ve used functional notations like
color:rgb(128, 128, 255). But square brackets?
The square brackets denote an attribute selector – a concept that was introduced in 1998 in CSS Level 2. An attribute selector modifies a simple selector by imposing an additional constraint on it. Does that sound like Greek to you? (Or like something other than Greek, for those of you who are, in fact, Greek?) Don’t worry, we’ll look at some examples in a short while.
Why Should You Even Bother?
But first, let’s address another question: If attribute selectors really are useful, why didn’t you already know about them? Or, to turn it around, since you’ve managed to get by without them, what’s the point of using them?
The reason you may not have heard about them is quite simple: Internet Explorer for Windows up to and including version 6 don’t support attribute selectors. Since the market share for those browser versions has been well above 80% until very recently, there hasn’t been much incentive for using attribute selectors in public-facing websites.
Version 7 of IE does support attribute selectors, though, and as more and more users upgrade from IE6, attribute selectors gain more interest.
What can those newfangled attribute selectors do then, that’s so useful that you should take some of your precious time to learn about them? The answer is that they allow you to do a lot of things that you hitherto have had no other way to achieve than to pollute your markup with