Help with CSS selectors (jQuery datepicker)

Question

I'm tyring to style the jQuery datepicker. I can't use a jQuery theme as it wrecks the rest of my site.

I've got it all working expect for one bit - highlighting the current day.

The problem I'm having is that when the datepicker first loads the current day is displayed as follows:

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight ui-state-hover" href="#">14</a>
</td>

When the user hovers over any other day, the ui-state-hover on the current day is removed, and then the current day highlighting works ok:

<td class="ui-datepicker-days-cell-over  ui-datepicker-today">
    <a class="ui-state-default ui-state-highlight" href="#">14</a>
</td>

My CSS for the hover state is like:

.ui-widget-content .ui-state-hover { ... }

and on-load this is overwriting my ui-state-highlight which highlights the current day.

I've tried to do:

.ui-widget-content .ui-state-highlight .ui-state-hover { ... }

Which I thought would preferentially match as it's a more specific selector, but it's not working.

So the question is, how can I make .ui-state-highlight .ui-state-hover override .ui-state-hover so I don't lose my highlight on hover?

Thanks.

Answer 1

Not ideal but you could add the !important to each of your styles inside your selector to override it wity your own style:

.ui-widget-content .ui-state-hover {
  color: '#00ff00' !important;
}