CODEWITHSUNDEEP
htmlcsscss-selectors
Abaij
Abaij

Reputation: 873

Styling CSS with more than one class

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?

Upvotes: 2

Views: 633

Answers (3)

Abudayah
Abudayah

Reputation: 3875

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

Upvotes: 9

sparagas
sparagas

Reputation: 49

Or you can just write

.active {
 background: #08a0f2;
}

http://jsfiddle.net/9CNX5/

Upvotes: 0

TylerH
TylerH

Reputation: 21063

In your CSS, don't have a space between the names step and active. The space acts as a separator. Instead, concatenate with a . inbetween them:

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

Upvotes: 2

Related Questions