 so i had played around with css attribute selectors a little bit before i went to an event apart boston but i have a much better grasp of them now i gave a brief overview in my an event apart boston summary 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 general information 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 attr whenever the attribute is set ex input type attr= val whenever the attribute equals the specific value ex input type= radio attr = val whenever the attribute equals one of the space separated list of values ex input type = radio checkbox attr = val 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 attr = val whenever the attribute contains the value ex a href = com attr = val whenever the attribute starts with the value ex a href = http attr$= val whenever the attribute ends with the value ex a href$= pdf ok so hopefully the general information makes them a little clearer and i hope the following examples make them very easy to use examples below i will give an example of each attribute selector and how it can be used attr ok so say maybe you want to style anchors that have the href attribute set to something this may help differentiate javascript anchors the css you want to add is like so a text decoration underline a href border bottom 1px dotted 999 text decoration none that will remove the underline and add a grey bottom border to anything that has the href attribute set attr= val ok so maybe you have added a green border to all input elements but then you dont want them on radio buttons so you add the following css input border 1px solid green input type= radio border none that will add a green border to all input elements except for radio buttons attr = val 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 input border 1px solid green input type = radio checkbox submit border none so you get a green border on all input elements except radio buttons checkboxes and submit buttons attr = val ok so maybe you want to add a google favicon to every link to google add the following pretending you have a google favicon a href = google background url images googleicon gif no repeat 100% 50% padding right 25px so now any link to google http google com analytics http google com sitemaps etc will have the google favicon attr = val lets add an external link to all links that start with http a href = http background url images external gif no repeat 100% 50% padding right 25px now every link that starts with http will have an external link icon attr$= val ok now we should display an icon for any file types that we are linking to pdf doc xls a href$= pdf a href$= doc a href$= xls background position 100% 50% background repeat no repeat padding right 19px a href$= pdf background image url images pdf gif a href$= doc background image url images doc gif a href$= xls background image url images xls gif 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 thats it i must say that this works in all browsers except ie 6 of course but if you use the dean edwards ie7 script 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 