CSS class not changing font color

Question

I have this code that I am working on in CSS. For some reason the class will not change the color of the paragraph and I am unsure as to why.

<div id="formsHead">
    <div id="loginT" class="active">
        <p id="loginL">Login</p>
    </div>
    <div id="registerT" class="active">
        <p id="registerR">Register</p>
    </div>
</div>

#loginT{
    float:left;
    width:50%;
    height:100%;
}
#registerT{
    float:left;
    width:50%;
    height:100%;
}
.active{
    background:#ecf0f1;
}
.active p{
        color:#34495e;
}

Here is a jsFiddle of the full code:

http://jsfiddle.net/nvmzygqg/

Answer 1

Your selector needs to be more specific. In your example it's being overriden by the #formsHead p selector. Adding the ID of each parent in your example will do the trick:

#loginT.active p,
#registerT.active p {
    color: #34495e;
}