You will be surprised to find square brackets in style sheets lately. But it true. Square brackets are very much present. But, CSS authors will find them more comfortable with curly braces, since they cannot write any useful CSS without them. Regular parentheses should be fairly familiar, too, at least if you’ve used functional notations like background-image:url(”/images/bg.png”) or color:rgb(128, 128, 255).

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. A question may strike your mind regarding the usefulness of attribute selectors.

The reason you may not have heard about them is quite simple. All the versions of Internet Explorer for Windows 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. But, Version 7 of IE does support attribute selectors and as more and more users upgrade from IE6, attribute selectors receive more attention. They allow you to do a lot of things that you until now have had no other way to achieve than to spoil your markup with class attributes.

An attribute selector or a simple selector is made up of following components:

• A type selector or an implicit or explicit universal selector.
• An optional ID selector.
• Zero or more class selectors.
• Zero or more attribute selectors.
• Zero or more pseudo-classes.

There are four different flavors in CSS2 and another three that are defined in CSS3. All seven flavors are implemented by the latest versions of the mainstream browsers: IE7, Firefox, Opera and Safari. Let’s look at the different flavors:

Attribute Presence
[title]

This CSS2 attribute selector matches any element that has a title attribute specified. It doesn’t matter what value the title attribute has. The selector is really *[title] with an implicit universal selector. The attribute name is an identifier, so don’t put any quotation marks around it.

CSS:
[title]
{
border-bottom: 1px dotted;
cursor: help;
}

Simple Attribute Value
Input[type= “submit”]

This CSS2 attribute selector matches any input element whose type attribute has the value “submit”. The attribute value can be specified as a string (enclosed in quotes) or as an identifier (no quotes). The attribute name is case insensitive in HTML (including pretend-XHTML), but case sensitive in XML (including real XHTML). The attribute value may or may not be case sensitive in HTML, depending on the attribute. In real XHTML all attribute values are case sensitive. We can use this to style form buttons without having to resort to a class:

CSS:

button,
input[type="button"],
input[type="reset"],
input[type="submit"]
{
background-color: #369;
color: #fff;
border: 2px solid;
border-color: #69c #036 #036 #69c;
}

Attribute List Value
p[class~="literary"]

This CSS2 attribute selector matches any paragraph element that belongs to the class literary. To be more specific, it matches paragraphs whose class attribute is a space-separated list of words, one of which is exactly equal to “literary”. In other words, it will match all of the following paragraphs:

CSS:

<p class=”literary”>…</p>
<p class=”rather literary”>…</p>
<p class=”literary you bet”>…</p>
<p class=”somewhat literary sometimes”>…</p>

There must be no white space between a type selector (or universal selector) and an attribute selector meant to modify it. White space is the descendant combinator in CSS. So a [href] means a *[href], which is something quite different from a[href]. The point is that we can use attribute selectors today. As the market share for IE5 and IE6 decreases, attribute selectors will become more and more useful and our markup can become leaner and cleaner.

Tags: Square Brackets Exist in CSS