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


Tags: jquery,html,css,jquery-ui,autocomplete

Problem :

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



Solution :

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.


    CSS Howto..

    How to change the colors of HTML form elements displayed in UIWebView?

    css - How to remove padding next to adjacent links?

    How use a -ms-expand in GWT (Google Web Tolkit)

    how to include absolute css path using add_editor_style() in wordpress

    How to dynamically add a CSS class and implement its style in JavaScript

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How to find out an element with id partially matched, and change its css style?

    How to have this horizontal CSS based navigation menu work properly?

    How to set align of elements to center with css?

    How to make `margin: top;` based on browser height?

    How to arrange three flex div side by side

    How to fix Conflicting responsive menu Css and Colorbox css?

    How do I apply a specific class to a navigation list, without breaking the nav functionality in mobile-view?

    How to layout ASP.Net RadioButtons with Images?

    how to make a stretchable blog header

    How to use a CSS for only one div and not the rest of the code?

    How do I get the ID of a JQuery item mid-function?

    How to use custom css file for layout of a module in Yii2

    How to make the content div scrollable without using javascript

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    how to use static folder in django for css and javascript?

    How to eliminate the margin of div boxes

    ckeditor - how to get custom-css with id to work?

    how to align right hand side image on top of text on mobile screen

    How to trigger click on links with the same class?

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How do I divide all margins but last to even out space?

    Div won't resize vertically in slideshow with CSS queries

    How to change CSS element of data-pid using jquery

    How to maintain page backgroud image zoom fixed? CSS