You will be astonished to discover square brackets in style sheets recently. But it is true. Square brackets are immensely there. But, CSS authors will find them more at ease with curly braces, since they cannot write any valuable CSS without them.

Standard parentheses should be reasonably well-known, 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 signify an attribute selector, a perception that was introduced in 1998 in CSS Level 2. An attribute selector transforms a simple selector by striking an extra constraint on it. A query may hit your mind regarding the effectiveness of attribute selectors.

The motive you may not have heard about them is fairly straightforward. 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 encouragement 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 awareness. They enable you to do a lot of things that you until now have had no other way to accomplish than to mess up 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 and zero or more pseudo-classes.

There are four dissimilar essences in CSS2 and another three in CSS3. All seven items are executed by the most recent versions of the majority 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 implied 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>