24 ways: The Attribute Selector for Fun and (no ad) Profit

The Attribute Selector for Fun and (no ad) Profit by Andy Budd

If I had a favourite CSS selector, it would undoubtedly be the attribute selector (Ed: You really need to get out more). For those of you not familiar with the attribute selector, it allows you to style an element based on the existence, value or partial value of a specific attribute.

At it’s very basic level you could use this selector to style an element with particular attribute, such as a title attribute.

<abbr title="Cascading Style Sheets">CSS</abbr>

In this example I’m going to make all <abbr> elements with a title attribute grey. I am also going to give them a dotted bottom border that changes to a solid border on hover. Finally, for that extra bit of feedback, I will change the cursor to a question mark on hover as well.

abbr[title] {
     color: #666;
     border-bottom: 1px dotted #666;
 }

 abbr[title]:hover {
     border-bottom-style: solid;
     cursor: help;
 }

This provides a nice way to show your site users that <abbr> elements with title tags are special, as they contain extra, hidden information.

Most modern browsers such as Firefox, Safari and Opera support the attribute selector. Unfortunately Internet Explorer 6 and below does not support the attribute selector, but that shouldn’t stop you from adding nice usability embellishments to more modern browsers.

Internet Explorer 7 looks set to implement this CSS2.1 selector, so expect to see it become more common over the next few years.

Styling an element based on the existence of an attribute is all well and good, but it is still pretty limited. Where attribute selectors come into their own is their ability to target the value of an attribute. You can use this for a variety of interesting effects such as styling VoteLinks.

VoteWhats?

If you haven’t heard of VoteLinks, it is a microformat that allows people to show their approval or disapproval of a links destination by adding a pre-defined keyword to the rev attribute.

For instance, if you had a particularly bad meal at a restaurant, you could signify your dissaproval by adding a rev attribute with a value of vote-against.

<a href="http://www.mommacherri.co.uk/" rev="vote-against">Momma Cherri's</a>

You could then highlight these links by adding an image to the right of these links.

a[rev="vote-against"]{
     padding-right: 20px;
     background: url(images/vote-against.png) no-repeat right top;
 }

This is a useful technique, but it will only highlight VoteLinks on sites you control. This is where user stylesheets come into effect. If you create a user stylesheet containing this rule, every site you visit that uses VoteLinks will receive your new style.

Cool huh?

However my absolute favourite use for attribute selectors is as a lightweight form of ad blocking. Most online adverts conform to industry-defined sizes. So if you wanted to block all banner-ad sized images, you could simply add this line of code to your user stylesheet.

img[width="468"][height="60"],
 img[width="468px"][height="60px"]  {
     display: none !important;
 }

To hide any banner-ad sized element, such as flash movies, applets or iFrames, simply apply the above rule to every element using the universal selector.

*[width="468"][height="60"], *[width="468px"][height="60px"]  {
     display: none !important;
 }

Just bare in mind when using this technique that you may accidentally hide something that isn’t actually an advert; it just happens to be the same size.

The Interactive Advertising Bureau lists a number of common ad sizes. Using these dimensions, you can create stylesheet that blocks all the popular ad formats. Apply this as a user stylesheet and you never need to suffer another advert again.

Here’s wishing you a Merry, ad-free Christmas.

About the author

Andy Budd is the Creative Director of user-centered design consultancy, Clearleft Ltd. His online home can be found at www.andybudd.com, where he writes about modern web design practices. Andy’s first book, CSS Mastery: Advanced Web Standards Solutions will be out in the spring.

Your comments

§ trovster:
Nice idea to block ads, but currently AdBlock for Firefox does a great job at that already.

What other browsers support user-defined stylesheets? Is IE7 going to? If not, then this is kind of pointless.

I can’t wait to make use of this selector and other more basic ones such as adjacent and direct descendant.

It could be useful on forms, to add icons for certain inputs. It’s already been documented for external links too.

Ooooh, I can’t wait!
§ wrtlprnft:
Opera supports User- defined stylesheets. You can even add a list of stylesheets that you can enable and disable over a button.

One of the predefined stylesheets in Opera happens to do exactly what you mentioned, by the way.
§ Derek:
Awesome article! You have to love those intricacies of web-standards! Go CSS2. Looking forward to the next few ways…
§ Dustin Diaz:
Although I haven’t found a terrible big use for attribute selectors, I have ran into the problem quite a bit of styling form input elements correctly and that’s when they would really come in most handy. Since there are so many kinds of ‘input’ elements, it would be nice to narrow it down by input[type='text'] { } or input[type='submit']

Instead with the little help of JavaScript I have it just append the type it is as a className to itself…this way we could, at the least, do this:
input.text { }

input.submit { }
Anyway, yey for the ad-free tips :) That’s too cool.
§ anty:
nice idea to use this for vote-against and vote-for attributes.
§ Denver:
User-defined stylesheets… Are they available in Firefox? I did not know about it before, but I don’t want to change by current browser to Opera just because its support for user-defined CSS. I would not be able to surf the Net without Mozilla’s webdeveloper extension :)
§ Molly E. Holzschlag:
Great article Andy, extra points for getting Microformats in there!

For readers who are asking: User style sheets are one of the earliest aspects of CSS and therefore have surprisingly wide support. No need to wait ‘til IE7 for implementation, it’s there.

To implement user styles in IE6, select Tools > Internet Options > General > Accessibility. In the Accessibility dialog there’s an option “Format documents with my style sheet”

Check that dialog and browse to the .css file you’d like to implement and voila! You can remove it at any time by unchecking it.

In IE 5 for Mac, Explorer > Preferences > Web Content > Show Style Sheets / Use My Style Sheet. Click the Select Style Sheet button and away you go.

Also worthy of note is that Chris Pederick’s wonderful Web Developer Extension for Mozilla / Firefox has a feature where you can add user styles right from the toolbar.

Enjoy, and happy no-ad browsing.

Thanks again Andy!
§ trovster:
Denver: Yes, you can have user-defined stylesheets in Firefox. Mozilla even have a whole page showing you how to remove adverts

For easy editing of the file required, I suggest the ChromeEdit extension
§ Dante:
What about this little ditty for showing mailto: and PDF links:

a[href^=mailto]:after { content: ”(Email)”; }

a[href$=.pdf]:after { content: ”(PDF)”; }
§ Abdelrahman Osama:
Great article Andy, I suggested using this method for showing XFN relations, some time ago check it out.
§ Simon Plenderleith:
I really wish IE would get it’s act together. The attribute selector offers great flexibility (as demonstrated in this article for a start!) and lends itself to some pretty powerful styling, which makes it all the more frustrating that IE does not support it yet… here’s hoping it’s something MS get right in IE7!
§ George:
Wouldn’t it be better to set
visibility:hidden;
instead of
display:none;
that way you’ll be less likely to be breaking layouts.
§ Pete Freitag:
This could also be used to show rel=”nofollow” links differently.
§ Fellipe Cicconi:
Cool Idea!

I’ll use it to block some Ads this Christmas, lol! Thanks for the suprise.

What about excludent rule?

Kind of

a[href ! ^=”http://”] {}

or…

a[href^=”http://”]:not {}

Exists???
§ David Hay:
I’m looking forward to being able to use the attribute selector with accesskeys to style navigation in future. I tried using it on something I was working on earlier, but obviously IE6 didn’t like it.
§ Mauro:
this is by far the best css paper i’ve read.

two thumbsup!
§ zcorpan:
Fellipe Cicconi, that would be:

a[href^="http://"] {}

a:not([href^="http://"]) {}

See the Selectors spec.

Commenting is closed for this article.