<p>So, I had played around with CSS attribute selectors a little bit before I went to <a href="http://aneventapart.com/events/boston07/">An Event Apart Boston</a>, but I have a much better grasp of them now. I gave a brief overview in my <a href="//trevor-davis.com/blog/web/an-event-apart-boston-summary.php">An Event Apart Boston Summary</a>.</p>

<p>Currently, you really have to do some digging to figure out exactly how to use them, but I hope this article explains them all better.</p>

<h2 class="replaceHeadline">General Information</h2>

<p>Basically, attribute selectors allow you to target elements based on their attributes (i.e. alt, href, title, etc.). In the table below, you can see all the different options for attribute selectors.</p>

<dl><dt>[attr]</dt>
 <dd>Whenever the attribute is set. Ex: input[type]</dd>

 <dt>[attr="val"]</dt>
 <dd>Whenever the attribute equals the specific value. Ex: input[type="radio"]</dd>

 <dt>[attr~="val"]</dt>
 <dd>Whenever the attribute equals one of the space separated list of values. Ex: input[type~="radio checkbox"]</dd>

 <dt>[attr|="val"]</dt>
 <dd>Whenever the attribute equals a hyphen-separated list of words, beginning with the value. (This one is supposed to be unreliable, and I am a little confused by the specifications, so I am not really sure of how to explain an example.)</dd>

 <dt>[attr*="val"]</dt>
 <dd>Whenever the attribute contains the value. Ex: a[href*=".com"]</dd>

 <dt>[attr^="val"]</dt>
 <dd>Whenever the attribute starts with the value. Ex: a[href^="http"]</dd>

 <dt>[attr$="val"]</dt>
 <dd>Whenever the attribute ends with the value. Ex: a[href$=".pdf"]</dd>
</dl><p>Ok, so hopefully the general information makes them a little clearer, and I hope the following examples make them very easy to use.</p>


<h2 class="replaceHeadline">Examples</h2>
<p>Below, I will give an example of each attribute selector and how it can be used.</p>

<h3 class="replaceHeadline">[attr]</h3>

<p>Ok, so say maybe you want to style anchors that have the href attribute set to something. This may help differentiate JavaScript anchors.</p>

<p>The CSS you want to add is like so:</p>

<div class="codeblock"><code>
a { text-decoration: underline; }<br /><br />a[href] {<br /> border-bottom: 1px dotted #999;<br /> text-decoration: none;<br />} 

</code></div>

<p>That will remove the underline, and add a grey bottom border to anything that has the href attribute set.</p>

<h3 class="replaceHeadline">[attr="val"]</h3>

<p>Ok, so maybe you have added a green border to all input elements, but then you don’t want them on radio buttons. So you add the following CSS:</p>

<div class="codeblock"><code>
input { border: 1px solid green; }<br /><br />input[type="radio"] { border: none; } 

</code></div>

<p>That will add a green border to all input elements except for radio buttons.</p>

<h3 class="replaceHeadline">[attr~="val"]</h3>

<p>Use the same example that you want to add a green border to all input elements except for radio buttons, checkboxes, and submit buttons. The CSS you need is:</p>

<div class="codeblock"><code>
input { border: 1px solid green; }<br /><br />input[type~="radio checkbox submit"] { border: none; } 

</code></div>

<p>So you get a green border on all input elements except radio buttons, checkboxes, and submit buttons.</p>

<h3 class="replaceHeadline">[attr*="val"]</h3>

<p>Ok, so maybe you want to add a <a href="http://google.com">Google</a> favicon to every link to Google. Add the following (pretending you have a Google favicon):</p>

<div class="codeblock"><code>
a[href*="google"] {<br /> background: url(/images/googleIcon.gif) no-repeat 100% 50%;<br /> padding-right: 25px;<br />} 

</code></div>

<p>So now any link to Google, http://google.com/analytics, http://google.com/sitemaps, etc. will have the Google favicon.</p>

<h3 class="replaceHeadline">[attr^="val"]</h3>

<p>Let’s add an external link to all links that start with http</p>

<div class="codeblock"><code>
a[href^="http"] {<br /> background: url(/images/external.gif) no-repeat 100% 50%;<br /> padding-right: 25px;<br />} 

</code></div>

<p>Now every link that starts with http will have an external link icon.</p>

<h3 class="replaceHeadline">[attr$="val"]</h3>
<p>Ok, now we should display an icon for any file types that we are linking to: pdf, doc, xls.</p>

<div class="codeblock"><code>
a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"] {<br /> background-position: 100% 50%;<br /> background-repeat: no-repeat;<br /> padding-right: 19px;<br />}<br /><br />a[href$=".pdf"] { background-image: url(/images/pdf.gif); }<br />a[href$=".doc"] { background-image: url(/images/doc.gif); }<br />a[href$=".xls"] { background-image: url(/images/xls.gif); } 

</code></div>

<p>This is one of the coolest things for me. No more adding extraneous markup in order to add an icon that shows the file type when linking to a file.</p>

<h3 class="replaceHeadline">That’s it!</h3>

<p>I must say, that this works in all browsers, except IE 6 of course. But if you use the <a href="http://dean.edwards.name/ie7/">Dean Edwards IE7 Script</a> and include the CSS 3 selectors, it will work. I will eventually give a rundown of how to use that script, because I find the documentation a little hard to read. So I hope everyone enjoys attribute selectors as much as I do.</p>