How to style different elements of jquery ui differently?

Question

To style the jqueryui tabs in a particular way, my team members modified the class ui-state-default as follows

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{ border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg); 

  font-weight: bold; color: White;  }

The problem now is that I am using jqueryui autocomplete combobox which creates a button element with the same class

Thus I have a the background image appearing which makes it look ugly and huge.

How do I set different styles for different elements? I tried puttin button.ui-state-default as a different style by jqueryui overrides that.

Answer 1

Change your current CSS rules for tabs as follows:

.ui-tabs .ui-tabs-nav .ui-state-default, 
.ui-tabs.ui-widget-content .ui-state-default, 
.ui-tabs .ui-widget-header .ui-state-default { border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg);
  font-weight: bold; color: White;
}

Note: .ui-tabs.ui-widget-content is not an error, it's like that on purpose. It means if both of those classes are present, then style by the rule that follows.