jQuery UI theme and :not() selector

I have created a custom jQuery UI theme. One of my styles .ui-state-hover takes care of the mouse hovering over all th开发者_JS百科e various buttons. The other style in question is .ui-datepicker-close that takes care of customizing the close button on the date picker by adding an icon.

My problem is that when I mouse over the close button in the date picker the .ui-state-hover style comes into play. I tried applying the :not() selector to the .ui-state-hover class but this made no difference.

I need to get this working in IE8 (the site needs to work in ie8).

Try placing your style in css file in order i.e. place .ui-state-hover before .ui-datepicker-close. This should do the magic. If not, you could try to add '!important' to all style definitions in '.ui-datepicker-close' definition.

Best wishes, Tomasz