a:2:{i:0;a:1:{s:4:"data";a:1:{s:7:"entries";a:1:{i:0;a:7:{s:2:"id";s:3:"289";s:5:"title";s:33:"CSS Attribute Selectors Explained";s:11:"displayDate";s:10:"04.14.2007";s:13:"attributeDate";s:10:"2007-04-14";s:4:"body";s:5428:"<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>";s:13:"numberOfLikes";N;s:10:"bodyBlocks";a:0:{}}}}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.46162700 1707493692";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.34758900 1706282441";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.22771600 1711953912";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.87777500 1713035607";}s:8:"reusable";b:0;}}