rewrite background with active class css

Question

I have few div and all are red in color, I use 'red' as the class name. but among the div I want to apply extra class like class="red active" to give selected div extra style.

why this doesn't work

.red{
   background: red;
}

.red .active{
   background: green;
}

Answer 1

change your css for :

.red.active

Answer 2

.red .active (with a space between) means an element that has a class active and is the descendant (children, granchildren, etc.) of an element that has a class red. This is called the descendant selector.

You need .red.active (without a space). It means an element that has both a red and active class. This is a multiple class selector.

Recommended read:

Multiple Class / ID and Class Selectors from Chris Coyier