CSS3 multiple backgrounds across selectors

Question

What I want to achieve is to set background in two separate CSS classes (using CSS3's multiple backgrounds would be great). I would like to that with as little markup as possible and to be universal.

Example:

CSS

.button {
    display: block;
}

.green {
    background-color: #87b400;
    background: -moz-linear-gradient(top,  #a4d400,  #739e00);
}

.icon {
    background-repeat: no-repeat;
}

.icon.add {
    background-image: url('../img/icons/add.png');
}

HTML

<a href="#" class="button green icon add">add item</a>
<input type="submit" name="example" value="add item" class="button green icon add" />
<button type="submit" class="button green icon add">add item</button>

I realize that i can do something like that

<a href="#" class="button green"><span class="icon add">add item</span></a>

but I think that there is a better way and I wouldn't be able to use it inside input element.

I also don't want to do something like this

.button.green.icon.add {
    background: -moz-linear-gradient(top,  #a4d400,  #739e00),
                url('../img/icons/add.png');
}

because having, let's say, 5 colors and 11 icons it is going to be a horror.

Answer 1

DaiYoukai is right, CSS3 multiple image backgrounds - can not be used across selectors.

Workaround: you can use CSS3 Content feature - it virtually create additional element.

CSS

.icon{
    background-image: url('../img/icons/icon.png');
    width:16px;
    height:16px;   
}
.icon.add:after {/* new virtual layer */       
    background-image: url('../img/icons/icon_add.png');
    content: "";
    display: block;
    position: absolute;
    width:16px;
    height:16px;
}

Note: Modern browsers correctly supports both CSS3 features, except IE:

• CSS3 multiple backgrounds - from IE9.
• CSS3 Content - from IE8.