title: Help with CSS selectors (jQuery datepicker)
body: <p>I'm tyring to style the jQuery datepicker. I can't use a jQuery theme as it wrecks the rest of my site.</p>
  
  <p>I've got it all working expect for one bit - highlighting the current day.</p>
  
  <p>The problem I'm having is that when the datepicker first loads the current day is displayed as follows:</p>
  
  <pre><code>&lt;td class="ui-datepicker-days-cell-over  ui-datepicker-today"&gt;
      &lt;a class="ui-state-default ui-state-highlight ui-state-hover" href="#"&gt;14&lt;/a&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>When the user hovers over any other day, the <code>ui-state-hover</code> on the current day is removed, and then the current day highlighting works ok:</p>
  
  <pre><code>&lt;td class="ui-datepicker-days-cell-over  ui-datepicker-today"&gt;
      &lt;a class="ui-state-default ui-state-highlight" href="#"&gt;14&lt;/a&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>My CSS for the hover state is like:</p>
  
  <p><code>.ui-widget-content .ui-state-hover { ... }</code></p>
  
  <p>and on-load this is overwriting my <code>ui-state-highlight</code> which highlights the current day.</p>
  
  <p>I've tried to do:</p>
  
  <p><code>.ui-widget-content .ui-state-highlight .ui-state-hover  { ... }</code></p>
  
  <p>Which I thought would preferentially match as it's a more specific selector, but it's not working.</p>
  
  <p>So the question is, how can I make <code>.ui-state-highlight .ui-state-hover</code> override <code>.ui-state-hover</code> so I don't lose my highlight on hover?</p>
  
  <p>Thanks.</p>