2

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
Andrew
  • 9,967
  • 10
  • 64
  • 103

3 Answers3

10

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

Adam Price
  • 10,027
  • 1
  • 20
  • 16
4

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;}
wildpeaks
  • 7,273
  • 2
  • 30
  • 35
  • 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 – Andrew Mar 22 '11 at 16:24
  • 1
    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. – wildpeaks Mar 22 '11 at 16:37
  • 1
    +1 for mentioning firebug. Sometimes its the only surefire way to find out what's going wrong with CSS. – Adam Price Mar 22 '11 at 16:43
  • I use one stylesheet for everything so I'm definately including the right one. Will firebug it and have a look again! – Andrew Mar 22 '11 at 16:43
2

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.

Alpesh
  • 5,307
  • 2
  • 19
  • 19
  • +1 for toggle class tip. Although the css is on the last line of my css file and issue is still occuring... – Andrew Mar 22 '11 at 16:42
  • -1 it doesn't have anything to do with the position of the class definition in the css file. – Adam Price Mar 22 '11 at 16:44
  • @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 – Andrew Mar 22 '11 at 16:50
  • 2
    @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. – Alpesh Mar 22 '11 at 16:50
  • 1
    I take it back. According to the [spec](http://www.w3.org/TR/CSS21/cascade.html#cascading-order): `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. – Adam Price Mar 22 '11 at 16:59
  • @Alpesh, I cannot change my vote unless the answer is edited. If you do so, I will remove the -1 – Adam Price Mar 22 '11 at 17:04
  • @Optus: Thanks, i respect your generousness. – Alpesh Mar 22 '11 at 17:09