[jQuery] Strange parent > child selector behaviour

[Darron]

I am trying to build a nice class heirarchy for a nested list menu
using the following html:

<div>
        <ul>
                <li>
                        <ul>
                                <li>
                                        <ul>
                                                <li></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
        </ul>
</div>

Using this function:

$(function(){

        $('div > ul').addClass('primary');
        $('div ul.primary li > ul').addClass('secondary');
        $('div ul.secondary li > ul').addClass('tertiary');

});

I would like to end up with:

<div>
        <ul class="primary">
                <li>
                        <ul class="secondary">
                                <li>
                                        <ul class="tertiary">
                                                <li></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
        </ul>
</div>

But instead, I end up with the 3rd level <ul> having the classes
'secondary' and 'tertiary', eg:

<div>
        <ul class="primary">
                <li>
                        <ul class="secondary">
                                <li>
                                        <ul class="secondary tertiary">
                                                <li></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
        </ul>
</div>

Can anyone please point out to me what I am doing wrong?