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

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