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