One CSS Class, two different styles icon-like

Like many people, including the jQuery UI official, they use a method of multiple class to achieve something, I get annoyed easy and wish to have a shortcut for this… the answer is amazingly simple as you will all slap your foreheads once you realise it’s simplicity.

Have you ever done the following?

.icon
{ 
   background-image: url(icons-sprite.png); 
}

.icon.icon-settings
{
background-position: 10px 40px;
}

Well here is the same example but without having to prepend the `icon` (first class).

style.css

[class^="icon-"]
{ 
    background-image: url(icons-sprite.png); 
}

.icon-settings
{
    background-position: 10px 40px;
}

OR simply use the white space instead of the hyphen.

As you can see form this jsFiddle That you can use
.icon, .icon.setting, .setting{ /* what ever*/} and the thing wont be affected… This method is cross browser as it has been since CSS2 (will except really old browsers as explain here on this page http://reference.sitepoint.com/css/attributeselector#compatibilitysection.

Valtid Caushi