This could also be used to show rel=”nofollow” links differently.

Wouldn’t it be better to set

instead of

that way you’ll be less likely to be breaking layouts.

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!

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.

Awesome article! You have to love those intricacies of web-standards! Go CSS2. Looking forward to the next few ways…

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:

Anyway, yey for the ad-free tips :) That’s too cool.

nice idea to use this for vote-against and vote-for attributes.

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!

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

What about this little ditty for showing mailto: and PDF links:

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

a[href$=.pdf]:after { content: ”(PDF)”; }

Great article Andy, I suggested using this method for showing XFN relations, some time ago check it out.

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!

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???

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.

this is by far the best css paper i’ve read.

two thumbsup!

Fellipe Cicconi, that would be:

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

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

See the Selectors spec.