The Attribute Selector for Fun and (no ad) Profit

17 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. 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!

  2. 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.

  3. 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.

  4. 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 :)

  5. 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!

  6. Dante

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

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

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

  7. 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!

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

  9. 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.

Impress us

Be friendly / use Textile