Overwrite jQuery UI CSS

Question

I have a little problem with jQuery UI at this time.

We use jQuery Accordions for our application and since our upgrade to jQuery UI 1.11.14 we experience a problem that causes any CSS we have written for Accordions to get overwritten by jQuery.

As far as I've understood this, jQuery UI activates itself after pageload and appends its styling. That leaves the question how I can add my own styling if jQuery always comes last. Any style inspectors shows that jquery-ui.min.css overwrites everything we have written before.

I know that !important exists but this is just bad practise and we want to avoid this or else we would append !important to about 20 rules or so which just looks terrible.

Edit: Here is a screenshot from IE's F12 Console: Here is a screenshot from IE's F12 Console http://puu.sh/lAoYJ/b3ed91b91c.png

Give the specificity. It also depends on what you are using. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Nov 27, 2015 at 10:21

Praveen Kumar Purushothaman · Accepted Answer · 2015-11-27 10:23:56Z

1

Specificity matters a lot in CSS. Almost all the rules in jQuery UI do not use #ids. So that's a great advantage. ID takes higher precedence. So, when you wanna do something, for eg:

.col-md-5 {color: #f00;}

If this was already written in the bootstrap as:

.row .col-md-5 {color: #000;}

Then your code doesn't work. Give the body an id or a parent. So that way, you can target:

#id .col-md-5 {color: #f00;}

And that works well.

answered Nov 27, 2015 at 10:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Overwrite jQuery UI CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related