Question

I have a Jquery method that adds a class with an addClass() , it suppose to add a class named “active” when you click on the div.

it works perfectly, because I can see in firebug that it does add the class name “active”.

 <div class="rateWrapper L">
        <div class="upV rateBtn">
        </div>
        <div class="numV largeFont">
            5
        </div>
        <div class="dwnV rateBtn">
        </div>
    </div>

The problem is, that I can’t see the css changes.

this is my css :

.wrapper .tutVWrapper .rateWrapper .upV .rateBtn .active{ background:url('../img/up_V_active.png');}
.wrapper .tutVWrapper .rateWrapper .numV{ font-weight: bold; margin-bottom: 15px; margin-top: 15px; text-align: center;}
.wrapper .tutVWrapper .rateWrapper .dwnV{ background:url('../img/dwn_V_none.png'); width: 20px; height: 20px; cursor: pointer;}
.wrapper .tutVWrapper .rateWrapper .dwnV .rateBtn .active{ background:url('../img/dwn_V_active.png'); }

how can I solve this pickle?
Thanks!

Answer 1

If both classes belong to the same element, there is no space in the CSS rule between the class names. A space means “any descendant of”.

so for example .upv .rateBtn .active should be .upv.rateBtn.active