Question

Is it possible to effect styles for descendants of a custom class only? I’d like to override some jQuery UI styles for the descendants of my DOM element only.

Something like

.myStuff .ui-button {font-size: 0.7em !important;}

<div class="myStuff">
  <input type="button"></input> !-- jQuery UI class .ui-button
</div>

<input type="button"></input> !-- .ui-button not effected by my .ui-button style

I’ve tried the child selector (>) but it stops at the first level :(. I actually thought the double class syntax with the space was the correct one…but it doesn’t work either.

These are the exact selectors I’m trying to override from jQuery UI:

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

I really just want to change the font size…I’ll try to calculate it per your example, but I didn’t have any luck yesterday :(.

Answer 1

You CSS looks alright, that should work, however I believe that you might be a victim of the CSS specificity. If you open up the jQuery UI stylesheet files, I believe you will see that the selector of the CSS rule you want to override is more specific than your CSS rule, thus has the upper hand and will be used in favor of your rule.

To be able to override it, you will have to add a CSS-rule of your own that has a greater specificity than the rule provided by jQuery UI.

Update

It is hard to give an exact example of how to override the rule in this case, since we don’t know how the selector looks for the rule that we want to override. However, the general idea is that you will have to calculate the specificity of the rule that you want to override (refer to the Smashing Mag article linked above, on how to do this) and then make sure that your rules specificity is greater than the specificity of the rule you want to override. There are several ways to accomplish this, add extra classes or IDs to your selector for instance.

I guess the easiest way in your case would be to open up the jQuery UI stylesheet, find the rule that you want to override, copy the exact selector that they are using, use that selector and prepend it with your .myStuff class, and you should have a rule that is more specific than the one provided by jQuery UI.

Also, I would NOT recommend using !important to solve this problem. This is my personal opinion, but if you start using !important, you might be in for a world of pain later on when you try to modify your CSS. Throubleshooting faulty layouts can be really tough if you have rules specified with !important that break the normal flow of your CSS.