A tribute to selectors

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
• Dan Cederholm
• Malarkey

Select exact matches

Now for greater specificity 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 & 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 Jon Hicks.