How to apply css, after Jquery adds a class?

Question

I am using a jquery accordion as following:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () { 
     $("#accordion").accordion();
    }
</script>

<style>
.ui-accordion-content{
        margin:0;
        padding:0;
}
</style>

JQuery creates a div.ui-accordion-content and applies the styles from jquery-ui.css to it. Unfortunately my own css from the style tags is not applied.

Why?

Do you need the jquery-ui.css? Maybe just remove it? I never use that when using the standard jquery accordion. — Billy Moat
– Billy Moat, Commented Sep 5, 2012 at 13:50
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come... - css-tricks.com/when-using-important-is-the-right-choice — iambriansreed
– iambriansreed, Commented Sep 5, 2012 at 13:53
@anonymousdownvotingislame Here is another point of view: webcredible.co.uk/user-friendly-resources/web-dev/…. — VisioN
– VisioN, Commented Sep 5, 2012 at 13:59
@anonymousdownvotingislame Strange. Here is the shorten link: bit.ly/74aQU0. It should work. — VisioN
– VisioN, Commented Sep 5, 2012 at 14:02

Henrik Ammer · Accepted Answer · 2012-09-05 15:45:09Z

2

The correct approach

You need to understand CSS precendence, read up on it http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/.

Using this your code would be updated to the following:

.ui-accordion .ui-accordion-content{
    margin: 0;
    padding: 0;
}

Since it is defined exactly the same as in the linked jquery ui css and after it in the DOM it will therefor have precedence.

The quick and dirty fix

Fix by adding !important to your own style like this:

.ui-accordion-content{
    margin:0 !important;
    padding:0 !important;
}

edited Sep 5, 2012 at 15:45

answered Sep 5, 2012 at 13:50

Henrik Ammer

1,89913 silver badges26 bronze badges

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

3 Comments

Henrik Ammer Over a year ago

Thats why I added the link to precedence and inheritance first. Most people here though are lazy and will always take the easy fix instead of actually learning the WHY. :/

iambriansreed Over a year ago

Agreed, so why not demonstrate the best way and not only the easy fix? +1 if you do.

Henrik Ammer Over a year ago

In hindsight I agree, I was not answering it properly. My answer has been updated accordingly.

VisioN · Accepted Answer · 2012-09-05 13:50:13Z

1

One option is to use !important:

.ui-accordion-content {
    margin: 0 !important;
    padding: 0 !important;
}

answered Sep 5, 2012 at 13:50

VisioN

146k35 gold badges287 silver badges291 bronze badges

3 Comments

iambriansreed Over a year ago

Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come... css-tricks.com/when-using-important-is-the-right-choice

VisioN Over a year ago

@anonymousdownvotingislame Well, I don't really agree. Sometimes it is useful, especially when you need a fast result. By all means this is one option.

gdoron Over a year ago

@anonymousdownvotingislame. HA?! !important means it's important not you're narcissistic & selfish or lazy. Funny isn't it? Why did the css designers choose that name for this attribute???

skywlkr · Accepted Answer · 2012-09-05 13:50:08Z

0

Download the jquery-ui.css, change the relevant style rules inside it and use that one instead of the public version.

OR

Try using !important after your css rules, like:

margin:0!important;

answered Sep 5, 2012 at 13:50

skywlkr

1,4551 gold badge13 silver badges22 bronze badges

1 Comment

iambriansreed Over a year ago

Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come... css-tricks.com/when-using-important-is-the-right-choice

Collectives™ on Stack Overflow

How to apply css, after Jquery adds a class?

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related