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.
Comment
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
Comment
Selectors…hmmmm…interesting…must research. Opens up too many possibilities to imagine.
Comment
Hmmm. As far as I remember attribute selectors won’t work on any IE/Win. Sad :(
Comment
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.
Comment
The best example of adblocking css is here: http://www.floppymoose.com/
Comment
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…
Comment
Check out what I did with CSS selectors. Thanks for the inspiration Andy!
http://www.9rules.com/whitespace/css_focus/focus_and_not.php
Comment
Very smart idea (and a very nice site as well).
Comment
Incase anyone doesn’t know you can set up your own stylesheet for ad-blocking in Safari under Advanced Preferences.
Comments on: Cool use for CSS attribute selectors
Jump to the comment form