My css-classes ain't kicking through, using JQuery toggleClass

Question

Ok, so I basicly have this list. What I'm trying to do is just highlighting items in the list with toggleClass.

<div class="listbox">
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</div>


<script type="text/javascript">
    $('#container .listbox li').click(function() {

        $(this).toggleClass('highlight');

    });
</script>

CSS:

div.listbox ul li{
    background: #eee;
    padding: 15px 20px;
    border-bottom: 1px solid #999;
    border-top: 1px solid #fff;}

HEAD:

<style type="text/css">
    .highlight{
        background: #aaa;
        padding: 20px 15px;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #999;}
</style>

The problem is that if I've specified a css property in the .css-doc, I can't modify that value with the new class.

I've tried placing it above and below the styleattributes and, as below, in the head-region.

When clicking, the js adds the class and all, but any predefined values wont change.

Answer 1

Try increasing the class specificity for something like:

div.listbox ul li.highlight {