Overriding default jquery css?

Question

I'm trying to narrow the handle on the jQuery UI slider widget. I created this CSS:

.ui-slider-handle {
    width: 10px;
}

Which the DOM inspector tells me is being ignored in favor of the jQuery UI CSS.

How can I give mine the higher priority? The only way to ID the slider handle, since it's made by a jQuery function (.slider()) and isn't actually in the .html file, is to use code to assign it an ID after having made it with jQuery, and then hoping the CSS applies, or else manually adding the width attribute with code. These seem unelegant.

What's the best way?

@Aerovistae Don't use !important. It seems to be useful first, but later you find out it poisoned your stylesheets and your life. — kapa
– kapa, Commented Mar 12, 2013 at 20:25
@Aerovistae, no, !important is more of a last resort for resolving specificity conflicts between rules. It should not be used in the general case. Otherwise it tends to creep in your styles very quickly. — Frédéric Hamidi
– Frédéric Hamidi, Commented Mar 12, 2013 at 20:25
@Aerovistae Agreed with Frederic, you want to stay away from using !important, it ends up creating more problems down the line! — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Mar 12, 2013 at 20:29

Mark Pieszak - Trilon.io · Accepted Answer · 2013-03-12 20:28:00Z

3

It is being overridden by jQuery UI's CSS because there's has more specificity. If you look at the code they have you simply need to have more, and it will override it.

html body .ui-slider .ui-slider-handle {} 
/* the added points from html & body, will trump jQuery UI's rule */

Using !important will also handle this, but it usually said to be something you don't want to use, unless there is truly no way to get around it. An example would be if you have inline styles on an element, and you want to trump those in your style sheet. Inline styles are given 1000 points, which would be impossible to trump.

Read more here http://css-tricks.com/specifics-on-css-specificity/

edited Mar 12, 2013 at 20:28

answered Mar 12, 2013 at 20:22

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Selvakumar Arumugam Over a year ago

To be precise it is .ui-slider .ui-slider-handle

temporary_user_name Over a year ago

Ah, I comprehend thoroughly. Thank you

dodgethesteamroller · Accepted Answer · 2013-03-13 19:50:52Z

You can manually override any of the JQuery or JQueryUI default styles in your own CSS if you try hard enough. There are a couple of issues with doing so, though:

As you've discovered, the cascade makes the default CSS take precedence in (possibly surprising) ways, so you have to use hacks--like !important, or redundant tags in your selectors like html body--to ensure that your styles "beat" JQuery's.
More problematic is that many of the widgets, Menu being a prime offender (but there are others), create new selectors dynamically when initialized. To override those styles you have to use Firebug or a similar tool on the page after your JS is written to figure out the new selector names and add them to your style sheet as well.

The Right Way to Do It is to use the ThemeRoller tool to create a single custom CSS "bundle" that changes all the styles at once. Bonus: since you can see how your custom styles affect all the widgets at the same time, it's easier to create a unified look for your page.

Collectives™ on Stack Overflow

Overriding default jquery css?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related