In CSS, how do I style a div that has two classes?

Question

Hi,

I have a div with the following CSS class defined:

<div class="ui-button ui-state-active">bla bla bla</div>

I am trying to define the CSS styling for that class by doing it this way

<style>
    .ui-button .ui-state-active {
        background-color:#000000;
    }
</style>

It's not working, am I referring to the class in the wrong way?

Thanks

Answer 1

Remove the space:

.ui-button.ui-state-active

with the space, the rule says "elements with the class ui-state-active that are descendants of elements with the class ui-button".

Specifying multiple classes is buggy in IE6: To IE6, the rule will apply to all elements with the class ui-state-active. (Thanks @Meder for the reminder)

Answer 2

.ui-button.ui-state-active {} 

Though this probably won't work in IE6, if that matters.

Answer 3

Why not just change the class to ui-state-active and copy the css over? (I know it's duplicating code)

<div class="ui-state-active">bla bla bla</div>

<style>
.ui-button {
    background-color:#000000;
}
.ui-state-active {
    background-color:#000000;
    color:blue;
}
</style>