Cool use for CSS attribute selectors | September 22, 2003

A while ago I wanted to remove the borders around all the text input boxes in a form, while keeping the borders around the submit buttons intact. The only way I could figure out how to do this was by setting classes for all the input boxes. It worked, but it felt rater unsatisfactory. Surely there should be some way to only apply styles to one type of input tag, but not another.

Well in fact there is, by using attribute selectors.

Attribute selectors are part of CSS2. They basically do what they say on the pack. You can select an element based on that elements attributes. So for instance, If I wanted to remove the borders around all the text input boxes in a form I could simply do this.

input[type="text"]{
  border-style: none;
}

Unfortunately, while attribute selectors are pretty well supported amongst most modern browsers, they aren't supported by IE5/Win. That meant in my case I was still stuck with using classes. Still it did open my eyes to how potentially useful attribute selectors could be.

Today I came across a cool way to use attribute selectors in order to hide banner adverts. The basic Idea is pretty simple. By using attribute selectors, hide any elements who's attributes look like they could relate to banner adverts. In the most simple for you'd do something like this.

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

Which would hide any image that was the shape of a regular banner ad.

However some people have taken this idea much further and have created user style sheets which aim to cover as many attribute permutations and combinations as possible. So if you're fed up of banner adverts, instead of using one of the many ad blocking programs around, why not simply set up your own banner ad blocking user style sheet.

Posted at September 22, 2003 11:29 PM

Comments

Seamus said on September 23, 2003 12:00 AM

You can also do stuff to signal if the link goes to a PDF file.

a[href$=”.pdf”]:after{
content: url(pdf-icon.png);
}

http://www.w3.org/TR/css3-selectors/#selectors

Scrivs said on September 23, 2003 1:32 AM

Selectors…hmmmm…interesting…must research. Opens up too many possibilities to imagine.

Kam said on September 23, 2003 6:46 AM

Hmmm. As far as I remember attribute selectors won’t work on any IE/Win. Sad :(

Michael Heilemann said on September 23, 2003 9:00 AM

But then again, what does?

Andy Budd said on September 23, 2003 9:11 AM

True, and they don’t appear to work on IE5/Mac either. Miscrosoft can put the effort into creating their own proprietary CSS to change the colour of a scroll bar, but can’t even be bothered to add something of real use like attribute selectors, to their browsers. Go figure?

Safari (my browser of choice) is fine with attribute selectors so I’ve decided to use the add blocking user style to see how it goes. However annoyingly you can’t change the borders on form elements, so even thought is supports attribute selectors, it wouldn’t have helped with my initial problem anyway.

Damn patchy CSS support.

Jemaleddin S. Cole said on September 23, 2003 2:25 PM

The best example of adblocking css is here: http://www.floppymoose.com/

tomjleeds said on September 23, 2003 3:50 PM

I’ve been trying to figure out a way to do that for ages! Guess I should read the odd book every now and then…

Scrivs said on September 23, 2003 4:49 PM

Check out what I did with CSS selectors. Thanks for the inspiration Andy!

http://www.9rules.com/whitespace/css_focus/focus_and_not.php

Andy Budd said on September 23, 2003 8:01 PM

Very smart idea (and a very nice site as well).

Charles Stuart said on September 25, 2003 9:46 PM

Incase anyone doesn’t know you can set up your own stylesheet for ad-blocking in Safari under Advanced Preferences.