Make a color stay on CSS element when selected

Trying to find a way to make a CSS element stay the same color that is set on hover when the element is selected. This is for size variations on a WooCommerce site.

My CSS Code is:

.va-picker-item:hover {
background-color: #000;
}

.va-picker-item:focus {
    background-color: #FFF;
}

which works fine.

The HTML is:

    <div class="va-separator clear"></div>
    <label class="va-attribute-label">Size</label>
    <div class="va-pickers">
        <a class="va-picker va-picker-text " data-attribute="pa_size" data-term="small" title="Small" ><span class="va-picker-item va-text S" >S</span></a>
        <a class="va-picker va-picker-text " data-attribute="pa_size" data-term="medium" title="Medium" ><span class="va-picker-item va-text M" >M</span></a>
        <a class="va-picker va-picker-text " data-attribute="pa_size" data-term="large" title="Large" ><span class="va-picker-item va-text L" >L</span></a>
    </div>
    <!-- /.va-pickers -->
    <div class="va-separator clear"></div>
</div><!-- /.ql-visual-variations -->

I've tried variations of :selected etc but to no avail. Any ideas? I understand that jQuery may also be an option, but my Javascript knowledge is practically nonexistent and the plugin developer offers no support on customization.

via Chebli Mohamed