Does addClass in JQuery override any existing css class based styles?

Question

I'm trying to add a class to elements clicked on. The elements have several clases already assigned to them including one with a border.

Although I know I can remove a current CSS class using removeClass() I need other styles that the class provides. So what I wonder is given the following examples can I not override a border style with addClass() is that border has a property already set? I don't want to use inline styles as they are not as easy to maintain.

CSS:

.dibHighlight{border:1px solid orange;}

JQuery that doesn't work:

$(this).closest('.drop').addClass('dibHighlight'); // Doesn't work

JQuery that works:

$(this).closest('.drop').css({ border: "1px solid orange" }); // Works

Revolutionist

There must be some other selectors overriding your .dibHighlight rule. – Judas

Answer 1

You can override other classes using addClass according to the rules of CSS specificity just as CSS classes override/inherit properties from each other when using the class attribute on the element.

The reason your second example works, is because it is equivalent to setting the style attribute on the element which is pretty much the most specific according to CSS specificity.

Conversely, the first example doesn't work because there is probably a CSS class that is more specific then .dibHighlight

Hebraist

Answer 2

There is probably another class that takes priority over dibHighlight defined somewhere else in your CSS. You should test which styles/classes are applied to your element using Firebug (or similar developer tools).

Or for the dirty quick fix, try this:

.dibHighlight{border:1px solid orange !important;}

Discontinuous

Interesting enough this still didn't update the border! Wouldn't want to use this as a solution long term but surprised it didn't work – Revolutionist

Interesting that it didn't work (a fortiori because it's even a shorthand value), then either what is modifying the value already uses !important, either the class is defined out of the scope of the document somehow ? (e.g. check the spelling of the css filename: it's silly but after many hours of coding, it can happen :) ). In any case, the only sure way to find out what's really happening is to select the element in Firebug (or similar) and see what classes are applied and which class overrides the border style. – Discontinuous

+1 for mentioning firebug. Sometimes its the only surefire way to find out what's going wrong with CSS. – Hebraist

I use one stylesheet for everything so I'm definately including the right one. Will firebug it and have a look again! – Revolutionist

Answer 3

The class below does not work because there is some existing class whose code is below this class in your css file.

.dibHighlight{border:1px solid orange;}

to make below code work just paste the above css code in the last line of your css file.

$(this).closest('.drop').addClass('dibHighlight');

After doing this when you will add class dibHighlight with addClass in jquery it will override the existing class similar attribute.

I suggest using toggleClass() instead of addClass() because even toggleClass() works as an addClass() in case the class you want to add does not already exists.

Depository

+1 for toggle class tip. Although the css is on the last line of my css file and issue is still occuring... – Revolutionist

-1 it doesn't have anything to do with the position of the class definition in the css file. – Hebraist

@Optus Afraid your wrong. I just moved it to the very bottom (was a couple of lines up before and . overlooked another definition that was also applied) now it works :) +1 – Revolutionist

@optus: It definitely has to do with position of class definition. While using toggleClass if the class contains a property which is also present in the already existing class then in that case the preference will be given to class definition which is last. You can check it out for yourself. – Depository

I take it back. According to the spec: Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. The order of the definition is the final/least weighted differentiator of precedence. For this reason, I would argue that relying on precedence defined by order in the CSS file rather then specificity is not preferable. – Hebraist

@Alpesh, I cannot change my vote unless the answer is edited. If you do so, I will remove the -1 – Hebraist

@Optus: Thanks, i respect your generousness. – Depository