CSS: A tribute to selectors

Two things happened on Friday which prompted me to talk about CSS attribute selectors. The first was an email plopping into my inbox,

Hi Andy,

I was just scanning through your CSS and noticed the following line of code:

div[id="content-sub"] p span {
display : block;
background : url(../images/x.png) no-repeat; }

I'm basically wondering what the [ ] are for? I've never seen it used anywhere and couldn't find any information about it on Google.

Thanks, Alex.

The second was working on a new web site with the mighty Brothercake. Scanning through the CSS he had written, like Alex, I was intrigued by,

*[id^="content-supp"]#content-supp:lang(en) {
left : 34.6%;
margin-left : 0; }

So, wanting to find out about these types of selectors I did a bit of reading around, but many of the explanations were a tad complicated. So I made some experiments of my own and thought I'd share them. Now I'm no CSS God like Brothercake, so please forgive my rather simplistic explanations.

Before we start, if you're reading this with Internet Explorer, go and amuse yourself for a few minutes, as attribute selectors won't work in the world's most popular (sic) browser. Still here? Phew, let's crack on.

Attribute selectors

Attribute selectors allow you to target an element based upon its 'attribute'. Here are some examples.

<a href="" title="" ></a>
<q cite="" ></q>
<img src="" alt="" />
<div id="" ></div >
<p class="" ></p>

The first example targets any element which has a specific attribute, for example all anchors which have a title attribute. In this example, anchors with titles attributes will display a dotted bottom border.

<a href="/" title="Andy Clarke" >Malarkey</a>
a[title]  { border-bottom : 1px dotted #900 }

Now for greater specivity, we can also target only anchors where the title attribute contains only the word 'Malarkey',

<a href="/" title="Malarkey" >Malarkey</a>
a[title="Malarkey"]  { border-bottom : 1px dotted #900; }

Instances where 'Malarkey' comes at the beginning of the attribute,

<a href="/" title="Malarkey is Andy Clarke" >Malarkey</a>
a[title^="Malarkey"]  { border-bottom : 1px dotted #900; }

Instances where 'Malarkey' comes at the end of the attribute,

<a href="/" title="Andy Clarke is Malarkey" >Malarkey</a>
a[title$="Malarkey"]  { border-bottom : 1px dotted #900; }

Or even titles which contain the word 'Malarkey' somewhere in the attribute.

<a href="/" title="I'd say Malarkey is putting on weight" >Malarkey</a> 

a[title*="Malarkey"]  { border-bottom : 1px dotted #900; }

Moving on

Of course, these selectors are not limited to anchors, they may be used for any element with an attribute and the possibilities seem almost endless. Perhaps,

• Styling links to a particular site or specific URL
• Styling quotations based on their cite attribute
• Styling a table based on certain words in its summary
• Styling images with particular words in their alt attributes