how to combine multiple css class selectors for jquery buttonset?

Question

I am using a JQuery buttonset and am setting the icon, when hovered over or when active, to a colored version of the icon so it stands out. The css looks like:

.ui-button .ui-icon.line {
    background-image: url("/static/16x16/line-black.gif");
}
.ui-button.ui-state-hover .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}
.ui-button.ui-state-active .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}

The above css works fine. My question is whether there is a way to combine the 2nd and 3rd css rules.

I have tried, among other variations, this:

.ui-button .ui-icon.line {
    background-image: url("/static/16x16/line-black.gif");
}
.ui-button.ui-state-hover .ui-button.ui-state-active .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}

But I haven't found a combination that works.

Is there a way to combine the two combinations (.ui-button.ui-state-hover and .ui-button.ui-state-active) in one css selector?

Answer 1

You can separate multiple selectors with a comma:

.ui-button.ui-state-hover .ui-icon.line, .ui-button.ui-state-active .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}