Is there another way to use these css styles, especially focus

Question

There's some problem with my css focus code. I wanted to change the background color when the class is selected but when I click, it changes the color but it doesn't maintain the changes. It just disappears and appears, like hover.

CSS Code

.reward:focus, 
.reward:active,
div.reward a:focus,
div.reward a:active,
.reward:focus .rdesc,
.reward:active .rdesc,
.reward:focus .rnumb,
.reward:active .rnumb,
.reward:focus .rnumbi, 
.reward:active .numbi,
.reward:focus .rtitle,
.reward:active .rtitle
{  
    background:yellow;   
}

HTML Code

<div class="cfrewards">
    <div class="reward_title pull-center">title</div>
    <div class="reward">
        <a href="javascript: void(0);" class="reward-amount">
            <span class="ramount">
                <input type="radio" name="reward" value="3" data-id="97" class="reward-amount-radio" />
                description
            </span>
            <span class="rtitle">title</span>
            <span class="rdesc">description</span>
        </a>
    </div>
</div>

Answer 1

I suggest something like

<input type="radio" name="reward" value="3" id="reward-amount-radio" />
<label for="reward-amount-radio">
    description
    <span class="rtitle">title</span>
    <span class="rdesc">description</span>
</label>

#reward-amount-radio {
    float: left;
}
#reward-amount-radio + label {  
    display: block;
}
#reward-amount-radio:checked + label {  
    background:yellow;
}

Demo

Answer 2

http://jsfiddle.net/ecb86gLw/

use :checked

input[type=radio]:checked + label {
background:yellow;   
}