jQuery Forum

Greetings, I'm customizing JQuery UI theme and I ran into a CSS selectors prevalence problem. For state, it's defined like this:

1. .ui-state-default,
2. .ui-widget-content .ui-state-default,
3. .ui-widget-header .ui-state-default {
4.   background: #d0bf9a url(../images/ui/ui-bg_glass_75_d0bf9a_1x400.png) repeat-x center center;
5. }

as you can see, the same class is targeted but using hierarchy with .ui-widget-content and .ui-widget-header. This causes me trouble while customizing buttons background, because I tried with:

1. .ui-button {
2.   bacground: /* another background */
3. }

So most buttons are OK except those that are inside another widget (i.e. inside an accordion's tab), because they match the selector ".ui-widget-content .ui-state-default" which is more specific of ".ui-button".

My question is:
1) why can't I just take off those two extra selectors for the default state background?
2) is it possible to reorganize this in a future version of JQuery UI?
3) what's the best practice to solve my problem, other than the obvious ".someclass .someclass .ui-button"?

Thanks :)