jQueryUI Autocomplete: how to use 'first-of-type' and 'last-of-type' with #ui-active-menuitem?

How can I style the first and last hover li items created? On the CSS code it just shows #ui-active-menuitem, that means only one rule to style the hovers. This is bad to my design because I use rounded corners, and I want that the first li hover has also rounded top corners and that the last li hover has rounded bottom corners.

The only rule the CSS shows is:

#ui-active-menuitem{
    background-color: #CCC
    color: #F0F0F0;
    z-index:-5;
}

I was looking in the code of jQueryUI Autocomplete and I found that it only implements one case of hover:

this.active = a.eq(0).children("a").addClass("ui-state-hover").attr("id", "ui-active-menuitem").end();

Now, because I can only us开发者_JS百科e one generic class for hover li items, it looks like this, with no rounded hover which looks odd on a 3px bottom rounded corner: http://i.stack.imgur.com/2EgsK.jpg

I made my own implementation separately in a static html page of the CSS where I use first-of-type and last-of-type to make the hovers rounded in the top and bottom corners, which looks like this: http://i.stack.imgur.com/bk6RA.jpg

How can I apply/implement first-of-type and last-of-type on #ui-active-menuitem with jQuery UI Autocomplete?

Thank you guys!

The anchor tag gets .ui-state-hover and id="ui-active-menuitem" but there is also the containing <li> and <ul> to consider. The structure is something like this (with only relevant details included):

<ul class="ui-autocomplete">
    <li class="ui-menu-item">
        <a>...</a>
    </li>
    <li class="ui-menu-item">
        <a>...</a>
    </li>
    <li class="ui-menu-item">
        <a class="ui-state-hover" id="ui-active-menuitem">...</a>
    </li>
</ul>

So you can do something like this in your CSS:

ul.ui-autocomplete li.ui-menu-item:first-child a#ui-active-menuitem {
    border-radius: 3px 3px 0 0;
}

ul.ui-autocomplete li.ui-menu-item:last-child a#ui-active-menuitem {
    border-radius: 0 0 3px 3px;
}

to only adjust the corners on the first or last active item in an autocomplete list.