Styling CSS with more than one class

Question

I want to style a css class in a class attribute with multiple class name, like this:

<div class='step active'><a href=''>Link 1</a>
<div class='step'><a href=''>Link 2</a>
<div class='step'><a href=''>Link 3</a>

And I try to make css code to style the active step class. This is the css code:

.step {
   background: #cccccc;
}
.step .active {
   background: #08a0f2;
}

But the code doesn't change the background color like I want. I already tried this.

.step > .active {
   background: #08a0f2;
}

But, it also doesn't work as well. How can I make it work?

Answer 1

use this:

.step.active {
   background: #08a0f2;
}

to learn more about css selectors read this topic:

Doc:

http://www.w3.org/TR/CSS21/selector.html

Usage and examples:

http://css-tricks.com/multiple-class-id-selectors