jQueryUI Автозаполнение: как использовать «первый тип» и «последний тип» с # ui-active-menuitem?

Question

Как я могу оформить первый и последний созданный элемент hover li? В коде CSS это просто показывает # ui-active-menuitem, что означает только одно правило для стиля наведения. Это плохо для моего дизайна, потому что я использую закругленные углы, и я хочу, чтобы у первого li hover также были закругленные верхние углы, а у последнего li hover - закругленные нижние углы.

Единственное правило, которое показывает CSS:

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

Я искал код jQueryUI Autocomplete и обнаружил, что он реализует только один случай наведения:

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

Теперь, поскольку я могу использовать только один универсальный класс для элементов hover li, он выглядит следующим образом, без округленного наведения, которое выглядит странным в нижнем округленном углу 3 пикселя: http://i.stack.imgur.com/2EgsK.jpg

Я сделал свою собственную реализацию отдельно на статической html-странице CSS, где я использую первый тип и последний тип, чтобы сделать наведение закругления в верхнем и нижнем углах, что выглядит следующим образом: http://i.stack.imgur.com/bk6RA.jpg

Как я могу применить / реализовать первый в своем роде и последний в типе на # ui-active-menuitem с автозаполнением пользовательского интерфейса jQuery?

Спасибо, ребята!

Answer 1

Якорный тег получает .ui-state-hover и id="ui-active-menuitem", но есть также элементы, содержащие <li> и <ul>. Структура выглядит примерно так (с включением только соответствующих деталей):

<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>

Так что вы можете сделать что-то подобное в своем 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;
}

для настройки углов только первого или последнего активного элемента в списке автозаполнения.