A tribute to selectors

There is a detailed tutorial available on how this page was created.

Select all given attributes

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

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

Andy Budd | Simon Collison | Malarkey.

Select exact matches

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; }

And all that Malarkey | Malarkey | Stuff and Nonsense.

Select matches at the beginning

Or 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 #333; }

Andy Clarke is Malarkey | Malarkey is Andy Clarke.

Select matches at the end

Or 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; }

Andy Clarke is Malarkey | Malarkey is Andy Clarke.

Select somewhere in the attribute

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

<a href="/" title="Wot a handsome chap Malarkey is." >Malarkey</a>
a[title*="Malarkey"]  { border-bottom : 1px dotted #900; }

Malarkey is more handsome than Andy Budd ;)

Let's have some fun

Now, having got a grasp of these, let's have some fun with attribute selectors.