In the recent past CSS frameworks have been mentioned many times. Many of these frameworks do simliar things but what they all are is large and often containing a lot of CSS unnecessary for the project you are currently working on. So when I came across the Toolbox CSS I thought I was in for another great tool I was never going to use. But my judgement was too hasty. On closer inspection it is soemthing quite different and all together more appealing, particularly for small projects. Rather than including everything and the kitchen sink, it provides what can be refered to as a utility set of style and positionings which if included in your website will instantly provided style commands for the most commonly used styles.

A common sense approach to making website development just that little bit easier. In my book, that is a good thing!

On closer inspection of the style sheet I cam across the following stylings

a[href^="mailto"]        { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }
a[href~=".pdf]            { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; }

I have never seen this before and haven't yet found any explanation for how this works. Is there a specific name for refering to this technique? Whats the syntax for using it? Are there any browser-compatability issues?

Has anybody any input on this?

via Alex Leonard comes the following explaination...

Theses are referred to as Attribute Selectors. What follows is an extract from the StyleMaster help on the subject

Attribute selectors extend significantly the class and id selectors introduced in CSS1. While the syntax is very different, class and id selectors are one simple aspect of what can be achieved with an attribute selector.

Firstly, what is an attribute? If you aren't familiar with the term, attributes are the properties of HTML elements. Some simple examples you might have seen are href, title, name and class. With attribute selectors, you can select elements on the basis of their attributes and the values of these attributes.

For example, you can select any link with a particular href, or any image with some specific alt text. You can also use it to select all tables that have a width attribute, no matter what the value of that attribute is.

Syntax
Attribute selectors have two parts. The first part is a selector that identifies an element generally (it might be an HTML element selector, or a more specific kind of selector such as a descendent selector). The second part specifies a condition for the attributes of the element. There are four kinds of condition:

That a particular attribute be set
That a particular attribute be set to a specific value
That a particular attribute include a specific value among its space separated list of values
That a particular attribute include a specific value among its hyphen separated list of values
An attribute selector selects an element where both

the general selector selects the element
and the specified attribute condition is met
The first part of an attribute selector should be very familiar, it is simply one of the various selectors we are familiar with (for example an HTML element selector).

The part of the selector that specifies the conditions for attributes is contained within square brackets "[" and "]". The syntax for each of the conditions described above is

Where an attribute must simply be set, simply put the name of that attribute between the square brackets. For example, a[title] selects any a elements where there is a title set. That is, elements of the form <a title="value">. The value of the title is not important, only that it is set
When an attribute must be set to a specific value, the form changes slightly. For example a[title="President"] will select only links with the title exactly equal to "President"
When an attribute must include a value among its list of space separated values, the form is again slightly different. This time, for example, we have the form a[title~="value"]
Lastly, where an attribute must include a value among its list of hyphen separated values, the form is body[lang|="en"]
Use
Attribute selectors provide a much more sophisticated version of the class and ID selectors. Their great attraction is that require you to make no changes to structural HTML in order to style a page. They will be of particular importance with XML.