CODEWITHSUNDEEP
htmlcss
Or Weinberger
Or Weinberger

Reputation: 7482

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

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

Upvotes: 1

Views: 259

Answers (3)

Xavias
Xavias

Reputation: 170

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>

Upvotes: 0

Pekka
Pekka

Reputation: 449703

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)

Upvotes: 4

meder omuraliev
meder omuraliev

Reputation: 186662

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

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

Upvotes: 2

Related Questions