{"authorId":"1","title":"CSS Attribute Selectors Explained","slug":"css-attribute-selectors-explained","postDate":1176592085,"expiryDate":null,"enabled":"1","fields":{"2":"<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=\"http:\/\/trevordavis.net\/blog\/web\/an-event-apart-boston-summary.php\">An Event Apart Boston Summary<\/a>.<\/p>\n\n<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>\n<!--more-->\n<h2 class=\"replaceHeadline\">General Information<\/h2>\n\n<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>\n\n<dl>\n <dt>[attr]<\/dt>\n <dd>Whenever the attribute is set. Ex: input[type]<\/dd>\n\n <dt>[attr=\"val\"]<\/dt>\n <dd>Whenever the attribute equals the specific value. Ex: input[type=\"radio\"]<\/dd>\n\n <dt>[attr~=\"val\"]<\/dt>\n <dd>Whenever the attribute equals one of the space separated list of values. Ex: input[type~=\"radio checkbox\"]<\/dd>\n\n <dt>[attr|=\"val\"]<\/dt>\n <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>\n\n <dt>[attr*=\"val\"]<\/dt>\n <dd>Whenever the attribute contains the value. Ex: a[href*=\".com\"]<\/dd>\n\n <dt>[attr^=\"val\"]<\/dt>\n <dd>Whenever the attribute starts with the value. Ex: a[href^=\"http\"]<\/dd>\n\n <dt>[attr$=\"val\"]<\/dt>\n <dd>Whenever the attribute ends with the value. Ex: a[href$=\".pdf\"]<\/dd>\n<\/dl>\n\n<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>\n\n\n<h2 class=\"replaceHeadline\">Examples<\/h2>\n<p>Below, I will give an example of each attribute selector and how it can be used.<\/p>\n\n<h3 class=\"replaceHeadline\">[attr]<\/h3>\n\n<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>\n\n<p>The CSS you want to add is like so:<\/p>\n\n<div class=\"codeblock\"><code>\na&nbsp;&#123;&nbsp;text-decoration:&nbsp;underline;&nbsp;&#125;<br \/><br \/>a&#91;href&#93;&nbsp;&#123;<br \/>&nbsp;border-bottom:&nbsp;1px&nbsp;dotted&nbsp;#999;<br \/>&nbsp;text-decoration:&nbsp;none;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>That will remove the underline, and add a grey bottom border to anything that has the href attribute set.<\/p>\n\n<h3 class=\"replaceHeadline\">[attr=\"val\"]<\/h3>\n\n<p>Ok, so maybe you have added a green border to all input elements, but then you don&rsquo;t want them on radio buttons. So you add the following CSS:<\/p>\n\n<div class=\"codeblock\"><code>\ninput&nbsp;&#123;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green;&nbsp;&#125;<br \/><br \/>input&#91;type=\"radio\"&#93;&nbsp;&#123;&nbsp;border:&nbsp;none;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>That will add a green border to all input elements except for radio buttons.<\/p>\n\n<h3 class=\"replaceHeadline\">[attr~=\"val\"]<\/h3>\n\n<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>\n\n<div class=\"codeblock\"><code>\ninput&nbsp;&#123;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green;&nbsp;&#125;<br \/><br \/>input&#91;type~=\"radio&nbsp;checkbox&nbsp;submit\"&#93;&nbsp;&#123;&nbsp;border:&nbsp;none;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>So you get a green border on all input elements except radio buttons, checkboxes, and submit buttons.<\/p>\n\n<h3 class=\"replaceHeadline\">[attr*=\"val\"]<\/h3>\n\n<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>\n\n<div class=\"codeblock\"><code>\na&#91;href*=\"google\"&#93;&nbsp;&#123;<br \/>&nbsp;background:&nbsp;url(\/images\/googleIcon.gif)&nbsp;no-repeat&nbsp;100%&nbsp;50%;<br \/>&nbsp;padding-right:&nbsp;25px;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>So now any link to Google, http:\/\/google.com\/analytics, http:\/\/google.com\/sitemaps, etc. will have the Google favicon.<\/p>\n\n<h3 class=\"replaceHeadline\">[attr^=\"val\"]<\/h3>\n\n<p>Let&rsquo;s add an external link to all links that start with http<\/p>\n\n<div class=\"codeblock\"><code>\na&#91;href^=\"http\"&#93;&nbsp;&#123;<br \/>&nbsp;background:&nbsp;url(\/images\/external.gif)&nbsp;no-repeat&nbsp;100%&nbsp;50%;<br \/>&nbsp;padding-right:&nbsp;25px;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Now every link that starts with http will have an external link icon.<\/p>\n\n<h3 class=\"replaceHeadline\">[attr$=\"val\"]<\/h3>\n<p>Ok, now we should display an icon for any file types that we are linking to: pdf, doc, xls.<\/p>\n\n<div class=\"codeblock\"><code>\na&#91;href$=\".pdf\"&#93;,&nbsp;a&#91;href$=\".doc\"&#93;,&nbsp;a&#91;href$=\".xls\"&#93;&nbsp;&#123;<br \/>&nbsp;background-position:&nbsp;100%&nbsp;50%;<br \/>&nbsp;background-repeat:&nbsp;no-repeat;<br \/>&nbsp;padding-right:&nbsp;19px;<br \/>&#125;<br \/><br \/>a&#91;href$=\".pdf\"&#93;&nbsp;&#123;&nbsp;background-image:&nbsp;url(\/images\/pdf.gif);&nbsp;&#125;<br \/>a&#91;href$=\".doc\"&#93;&nbsp;&#123;&nbsp;background-image:&nbsp;url(\/images\/doc.gif);&nbsp;&#125;<br \/>a&#91;href$=\".xls\"&#93;&nbsp;&#123;&nbsp;background-image:&nbsp;url(\/images\/xls.gif);&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<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>\n\n<h3 class=\"replaceHeadline\">That&rsquo;s it!<\/h3>\n\n<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>","14":{"old_id":{}}}}